Why is my Ext Grid not populating with Data?
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_开发者_JAVA技巧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
}
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'
}
})
});
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.
加载中,请稍侯......
精彩评论