Why is my Ext Grid not populating with Data? - extjs4

Question

I'm giving the code I've used..
Please help...
The JavaScript section looks like:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
]/*,
validations: [{
type: 'length',
field: 'news_title',
min: 1
}, {
type: 'length',
field: 'news_summary',
min: 1
}, {
type: 'length',
field: 'news_description',
min: 1
}]*/
});
store = new Ext.data.JsonStore({
autoLoad: true,
model: 'NewsInfo',
sortInfo: { field:'news_title', direction:'ASC'},
idProperty: 'news_id',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: $this._s_ajax_url + '/load_news_collection/true',
method: 'POST'
}),
reader: Ext.data.JsonReader({
url: $this._s_ajax_url + '/load_news_collection/true',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
],
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
})
});
var columns = [
{
text : 'News ID',
width : 55,
sortable : true,
hideable : false,
dataIndex: 'news_id'
},
{
text : 'News Sinossi',
width : 235,
sortable : true,
hideable : true,
dataIndex: 'news_title'
},
{
text : 'Active',
width : 75,
sortable : true,
hideable : true,
dataIndex: 'is_active',
align : 'center',
renderer : function (s_val) {
if (s_val == 'YES')
{
return '<img src="' + $this.get_skin_url('images/icons/tick_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
}
return '<img src="' + $this.get_skin_url('images/icons/cross_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
}
},
{
text : 'Last Updated',
align : 'center',
width : 95,
sortable : true,
hideable : false,
renderer : Ext.util.Format.dateRenderer('d-M-Y'),
dataIndex: 'updated_at'
},
{
xtype : 'actioncolumn',
align : 'center',
hideable: false,
width : 70,
items : [{
icon : $this.get_skin_url('images/icons/pencil.png'), // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
$('#div_news_grid_container').slideUp(800);
$('#div_editor_content').slideDown(800, function () {
$('#news_id').val(obj_rec.get('news_id'));
$('#news_title').val(obj_rec.get('news_title'));
$('#news_summary').val(obj_rec.get('news_summary'));
tinyMCE.get('news_description').setContent(obj_rec.get('news_description'));
});
}
}, {
icon : $this.get_skin_url('images/icons/view.png'), // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_description = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
" + obj_rec.get('news_description') + "\
</div>";
var s_description_html = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
<pre>\
" + obj_rec.get('description_html') + "\
</pre>\
</div>";
Ext.create('Ext.window.Window', {
renderTo: "main-content",
title: "Description for " + obj_rec.get('title_text'),
closeAction: 'hide',
minimizable: false,
maximizable: false,
resizable: true,
modal: true,
layout: 'border',
height: 350,
width: 550,
items: [{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Preview',
html: s_description
}, {
title: 'HTML',
html: s_description_html
}]
}]
}).show();
}
}, {
icon : $this.get_skin_url('images/icons/cross.png'), // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_news_title = obj_rec.get('title_text');
var i_news_id = obj_rec.get('news_id');
Ext.MessageBox.show({
title:'Confirm Delete',
msg: 'Do you really want to remove ' + s_news_title + '?',
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
closable: false,
fn: function (btn) {
if (btn == 'yes')
{
$this.delete_news(i_news_id);
}
}
});
}
}]
}
];
store.on('load', function () {
Ext.create('Ext.grid.Panel', {
store: store,
columns: columns,
height: 350,
width: 645,
title: 'News Management System',
renderTo: 'div_news_grid',
loadMask: true,
viewConfig: {
stripeRows: true
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', /*{
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}*/]
})
});
});
The server responds with the following:
{
"records":[
{
"news_id":"1",
"news_title":"comunicato",
"news_summary":"Un corso di lingua da seguire sempre, anche fuori sede Un problema che si riscontra frequentemente nelle",
"news_description":"<p> <\/p>\r\n <p>L\u2019estate \u00e8 alle porte e desideriamo aggiornarvi sulle attivit\u00e0 che stiamo organizzando per voi:<\/p>\r\n <p> <\/p>\r\n <p>Per i bambini e i ragazzi dai 4 ai 19 anni proponiamo un programma ricco di giochi, attivit\u00e0 pratiche, laboratori e tanto divertimento! Un\u2019occasione in pi\u00f9 per mettere in pratica le conoscenze linguistiche in un contesto diverso da quello prettamente scolastico favorendo anche il lavoro di gruppo.<\/p>\r\n <ul class=\"list01\">\r\n <li>Si pu\u00f2 scegliere di fare 1 o 2 settimane<\/li>\r\n <li>I corsi si svolgono dal 13 giugno al 1 luglio (7 \u2013 19 anni) e dal 4 al 15 luglio (4 \u2013 6 anni), dal luned\u00ec al venerd\u00ec, dalle 8.30 alle 12.30<\/li>\r\n <li>2 settimane: \u20ac 280,00<\/li>\r\n <li>1 settimana: \u20ac 150,00<\/li>\r\n <li>I gruppi verranno attivati al raggiungimento di minimo 5 partecipanti e massimo 10<\/li>\r\n <li>Al raggiungimento di 10 partecipanti ci sar\u00e0 uno sconto del 20% per ogni studente, quindi se avete amici o parenti interessati avvertiteli!<\/li>\r\n <li>Sar\u00e0 disponibile un servizio di pre e post accoglienza <\/li>\r\n <\/ul>\r\n <p>Infine vi ricordiamo che la scuola rester\u00e0 aperta per tutta l\u2019estate (eccetto dal 1 al 22 agosto) per lezioni individuali, recupero crediti scolastici e mini-gruppi.<\/p>\r\n <p> <\/p>",
"is_active":"YES",
"published_on":"2011-03-01 15:53:36",
"updated_at":"2011-05-25 20:19:12"
}
],
"row_count":1,
"success":true
}

Answer 1

This is tagged with extjs4, so I think this might just be a matter of changing your object configurations to match the new config options:
You have both fields and a model defined on the store. You only need the model.
idProperty is defined as part of the model now, you have it on the store
readers are defined as part of the proxy now, you have it on the store
the specialized store types are deprecated (or at least, undocumented)
Your autoLoad might be finishing before your on('load') gets registered.
sortInfo should be defined as sorters
I highly recommend always referring to the official API to determine the "appropriate" configurations. For stores: http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Store
Here is a modified (but untested) version of your code with examples of the changes to make:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
idProperty: 'news_id',
// The rest of this should be right
});
The store configuration is pretty different, and is probably at the root of your data not loading:
var store = new Ext.data.Store({
autoLoad: {
callback: function() {
Ext.create('Ext.grid.Panel', {
// The rest of this should be right, too, pulled up from listener
});
}
},
model: 'NewsInfo',
sorters: [{ property:'news_title', direction:'ASC'}],
remoteSort: true,
proxy: {
type: 'ajax',
url: $this._s_ajax_url + '/load_news_collection/true',
method: 'POST',
reader: {
type: 'json',
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
}
})
});

Answer 2

I finally found my problem, its not json version.
This may seem stupid, but I was working locally on my Desktop and I was doing a Json request to the server (www.domain.com/json.php).
You can create your interface without been on server. But if you use form and submit.
Your website must also be on a server.