Retrieve data with extjs 3.4 panel + dataview + jsonstore - php

i'm trying to show some data via dataview, but for some reason i am getting an emptytext message (No data).
Here is my dataview:
xtype : 'dataview',
emptyText : 'No data',
id : 'cartdata',
multiSelect : true,
plugins : new Ext.DataView.DragSelector( { dragSafe : true } ),
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'images'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
}),
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="images">',
'<a title="{id}">test</a>',
'</tpl>',
'</tpl>'
)
and this is a data from php:
{"data":{"images":{"id":"2"}},"status":"success"}
I am new to extjs and appreciate any help.

By the looks of it you are not returning a successProperty value correctly. Change the response from you php code to be, as listed below.
The default successProperty of the JsonReader on your store is 'success'. ExtJs will look for this property in your server response.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader-cfg-successProperty
Also, you will probably want to return your data as a json array, not an object. You dont need the image object inside the data array.
Server response:
{ "data":[{"id":"2"}], "success":true }
Javascript:
...
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'id'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
})
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<a title="{id}">test</a>',
'</tpl>'
)

Related

Why isn't my Wordpress custom route returning data out of the database?

The code below is my custom endpoint where I am trying to grab data out of my saic3_LibraryIndex database.
<?php
add_action('rest_api_init', function () {
register_rest_route('libraries/v1', '/all', array(
'methods' => 'GET',
'callback' => 'retrieve_libraries'
) );
} );
function retrieve_libraries( $data ) {
global $saic3_LibraryIndex;
$query = "SELECT * FROM `Library`";
$list = $saic3_LibraryIndex->get_results($query);
return $list;
}
In my javascript I am running an ajax call on page load to attempt to dynamically populate the page based off of the info in the db. For now I am just using this call to make sure that I am getting something back.
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$.ajax({
url: "/wp-json/libraries/v1",
method: 'GET',
success: function(response) {
console.log(response);
},
failure: function(err) {
console.log(err);
}
});
});
</script>
The route is hitting as a success and not giving me a 404 but the response I am getting back has no data in it. The response is just
{namespace: "libraries/v1", routes: {…}, _links: {…}}
namespace
:
"libraries/v1"
routes
:
/libraries/v1
:
endpoints
:
[{…}]
methods
:
["GET"]
namespace
:
"libraries/v1"
_links
:
{self: "{`my-url-.com`/wp-json/libraries/v1"}
__proto__
:
Object
/libraries/v1/all
:
endpoints
:
[{…}]
methods
:
["GET"]
namespace
:
"libraries/v1"
_links
:
{self: "`my-url-.com`/wp-json/libraries/v1/all"}
__proto__
:
Object
__proto__
:
Object
_links
:
up
:
[{…}]
__proto__
:
Object
__proto__
:
Object
I am brand new to WordPress so any help on this would be greatly appreciated. From what I was told the database was named saic3_LibraryIndex which from my thinking would take the place of wpdb. I tried switching it to wpdb and just using this call to grab the local posts but that still gives me the same response in the console. I am almost certain that endpoint is written incorrectly just not sure how to write it correctly.
SOLVED
Since I was trying to connect to another database outside of wpdb I needed to create a new instance of wpdb like so...
add_action('rest_api_init', function () {
register_rest_route('libraries/v1', '/all', array(
'methods' => 'GET',
'callback' => 'retrieve_libraries'
) );
} );
function retrieve_libraries( $data ) {
$second_db = new wpdb(DB_USER, DB_PASSWORD, "saic3_LibraryIndex", DB_HOST);
$query = "SELECT * FROM `Library`";
$list = $second_db->get_results($query);
return $list;
}

pass combobox value to php extjs 4

I want to pass a combobox value to a PHP file that'll execute a mySQL query. I'm using Extjs 4 with the MVC architecture. This is my combobox :
{
xtype: 'combobox',
id: 'cmbMetric',
name: 'sev',
mode: 'queryMode',
//querymode : 'lcoal',
fieldLabel: 'Metric',
store: 'MetricsData',
editable: false,
valign : 'middle',
margin : 15,
displayField:'name_metric',
valueField : 'id_metric'
}
My store :
Ext.define('Metrics.store.GuiData', {
extend: 'Ext.data.Store',
model: 'Metrics.model.GuiData',
autoLoad: true,
idProperty: 'id_metric',
proxy : {
type : 'ajax',
actionMethods : 'POST',
api : {
read : 'gui_comp_items.php'
},
reader: {
type: 'json',
successProperty: 'success',
messageProperty: 'message',
root: 'data'
}
}
});
When I choose a combobox value, this function is called by the controller :
onSelectedValue : function(combo) {
var selected = combo.getValue();
var guiDataStore = this.getGuiDataStore();
guiDataStore.getProxy().url = 'gui_comp_items.php?id_metric=' + selected ;
guiDataStore.load({
params : {
id_metric : selected //The parameter I want to send to the php file
},
callback:this.onGuiDataLoad,
scope: this
});
}
My php file :
function guiCompItems()
{
$id_metric = $_GET['id_metric'];
$sql = 'select m.id_metric, f.name_filter, gui.type_guicomp from gui_comp gui inner join filter f inner join metric m
on f.id_guicomp = gui.id_guicomp
and f.id_metric = m.id_metric
where m.id_metric ='. mysql_real_escape_string(trim(intval($_GET['id_metric'])));
$result = mysql_query($sql); // result set
while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};
$data = json_encode($arr); //encode the data in json format
echo '({"success": "true", "message" : "OK","data":' . $data . '})';
}
The data is always "null". I think that the parameter is not sent to the php file.
Any help would be much much appreciated. Thanks.
Store load doesn't actualy encode the params config in the request. The request is made by the proxy configured for the store so any other params you need to send should be set in the proxy's extra params config. Like:
guiDataStore.getProxy().url = 'gui_comp_items.php?id_metric=' + selected ;
guiDataStore.getProxy().extraParams = {
id_metric : selected //The parameter I want to send to the php file
};
guiDataStore.load({
callback:this.onGuiDataLoad,
scope: this
});

How to render different view on selecting tabs in ext js4?

1)I have a json file which I want to display in view.
{
"contents": [
{
"title":'JWorld',
"image":'image/e-learning/elearning.png',
"subtitle":[
{
"categories":'Aus',
},
{
"categories":'England',
}
]
},
{
"title":'JIndia',
"image":'image/Content/History_of_India.jpg',
"subtitle":[
{
"categories":'History',
},
{
"categories":'India palace',
}
]
},
{
"title":'JMaharastra',
"image":'image/Content/Geography.jpg',
"subtitle":[
{
"categories":'History Maharastra',
},
{
"categories":'Maharastra Heros',
}
]
}
]
}
2)My view file :--
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.view.View',
id:'contentcategoriesViewId',
alias:'widget.ContentcategoriesView',
store:'kp.DnycontentcategoriesStore',
config:
{
tpl:'<tpl for="0">'+
'<div class="main">'+
'</br>'+
'<b>{title}</b></br>'+
'<img src={image} hight="50" width="100"></br>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});// End of class
3) i am using tab panel and dynamically adding tabs in it using json file.
Ext.define('Balaee.view.kp.dnycontentcategories.Contentcategories',{
extend:'Ext.tab.Panel',
requires:[
'Balaee.view.kp.dnycontentcategories.ContentcategoriesView','Balaee.view.kp.dnycontentcategories.ContentcategoriesView1'
],
id:'contentcategoriesId',
alias:'widget.Contentcategories',
height:500,
items:[
],//end of items square
});// End of login class
4) My store file:--
Ext.define('Balaee.store.kp.DnycontentcategoriesStore',{
extend: 'Ext.data.Store',
model: 'Balaee.model.kp.DnycontentcategoriesModel',
autoLoad:true,
// filters: [{
// property: 'title',
// }],
proxy:
{
type:'ajax',
api:
{
read:'data/content.json',
//create: ,
//update: ,
//destroy: ,
},//End of api
reader:
{
type:'json',
root:'contents',
//successProperty: ,
}//End of reader
}//End of proxy
});//End
5) My Controller file some code
here I am dynamically adding some tabs from json file.And selecting particular tab I want different particular values from json file. But I get same view of first tab. How can I solve this problem.
init: function(){
console.log("inside content controller");
this.control({
'Contentcategories':
{
render:this.renderFunction,
}
});//End of control
},//End of init() function
renderFunction:function(){
console.log("Inside render function");
var tabPanel = Ext.getCmp('contentcategoriesId'); // tabpanel
var tabPanelView = Ext.getCmp('contentcategoriesViewId'); // tabpanel view
var storeObject= this.getStore('kp.DnycontentcategoriesStore'); // store
storeObject.on('load',function(){
storeObject.each(function(model){
//tabPanelView.store().filter('title',model.get('title')),
console.log(model.get('title'));
console.log(model.get('categories'));
tabPanel.add({title:model.get('title'),
id:model.get('title'),
//html:"<image src=model.get('image')>",
xtype:'ContentcategoriesView',
}); //End of add function
});// End of storeObject function
tabPanel.setActiveTab(0);
});
},// End of render function
please give me some suggestion.
There are a few issues with your code.
You define ContentcategoriesView - its a a component you have extended; but you give it an id (contentcategoriesId) yet you are creating more than one of these components - it makes no sense as an id has to be unique per component instance.
Then, you attach a store to this view, which means all components will render the same.
If I understand correctly you want each entry in your json to become a different tab.
I would take this direction (code not tested, but should give you a direction):
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.panel.Panel', // Notice it's a panel.
alias:'widget.ContentcategoriesView',
config:
{
tpl: '<div class="main">' +
'</br>' +
'<b>{title}</b></br>' +
'<img src={image} hight="50" width="100"></br>' +
'</div>'
itemSelector:'div.main',
}
});
And then:
storeObject.on( 'load',function() {
storeObject.each( function( model ) {
tabPanel.add({
xtype: 'ContentcategoriesView',
title: model.get( 'title' ),
id: model.get( 'title' ),
data: model
});
});
tabPanel.setActiveTab(0);
});

Extjs file upload request stays on waitMsg

Through an ExtJs form I am uploading a file for processing in php (csv file in this matter).
The processing all works fine without errors or anything. And as far as I know, all of the other requirement for a proper response are met.
Return message = {success: true}
Response header Content/Type = text/html
Status = 200 OK
However ExtJs keeps showing my WaitMsg instead of going to my success of failure functions
Here is my form:
var form = new Ext.FormPanel({
id : 'mailinglist_form_import',
labelWidth : 210,
fileUpload : true,
border : false,
url : '/plugin/NewsletterManagement/mailinglist/import',
items : [{
xtype : 'fieldset',
width : 560,
border : false,
autoHeight : true,
labelWidth : 215,
defaultType : 'textfield',
defaults : {
width : 307,
labelStyle : 'font-weight: bold;'
},
items : [{
fieldLabel : t('Name') + ' *',
name : 'mli_name',
allowBlank : false
},{
xtype : 'textfield',
fieldLabel : t('File') + ' *',
name : 'file',
inputType : 'file'
}]
}]
});
The button:
var saveBtn = new Ext.Button({
text: t("Save"),
iconCls: 'pimcore_icon_save',
handler: function() {
form.getForm().submit({
waitMsg: t('Saving...'),
success: function () {
var tabpanel = Ext.getCmp("pimcore_panel_tabs");
Ext.MessageBox.alert (t('Message'),t('Data has been saved'));
form.getForm().reset();
grid.getStore().reload();
tabpanel.activate(gridTabId);
tabpanel.remove(tabId);
},
failure: function () {
Ext.MessageBox.alert (t('Message'),t('Saving data failed'));
}
});
}
});
The PHP file contains an echo:
echo "{'success': true}";
Any help is greatly appriciated.
Greetz,
XpertEase
Open console and see the error. If you dont's see both of your alerts -- then it's some error in code, in extjs side. Understand it, fix and then report back.

Problem integrating jeditable in cakephp

I have integrated jquery jeditable in my project.
$(function() {
$(".editable_textarea").editable("/articles/edit/", {
indicator : "<img src='img/indicator.gif'>",
type : 'textarea',
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
method : 'POST',
});
});
Now when I click on the div.editable_textarea you see textarea with ok button. Now when make changes and click on OK. In my controller action /articles/edit, I am simple print $this->data.
It prints Array()(empty array).
No data is sent to controller. I also tried $this->params['url'].
It prints Array('URL' => '/articles/edit').
I appreciate any help.
Thanks.
You did not named it
$(function() {
$(".editable_textarea").editable("/articles/edit/", {
indicator : "<img src='img/indicator.gif'>",
type : 'textarea',
name : 'data[Articles][desc]',
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
method : 'POST',
});
});
and you can access this in your controller like
echo $this->data['Articles']['desc'];
You can go with this for your more info

Categories