为什么我的Ext Grid没有填充数据?

问题描述

| 我正在提供我使用的代码。 请帮忙... JavaScript部分如下所示:
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\',{ name:\'news_description\',mapping:\'news_description\',{ name:\'news_source\',mapping:\'news_source\',{ name:\'published_on\',mapping:\'published_on\',type:\'date\',dateFormat:\'Y-m-d H:i:s\' },{ name:\'on_skype\',mapping:\'on_skype\',{ name:\'is_active\',mapping:\'is_active\',{ name:\'updated_at\',mapping:\'updated_at\',dateFormat:\'Y-m-d H:i:s\' }
        ]/*,validations: [{
            type: \'length\',field: \'news_title\',min: 1
        },{
            type: \'length\',field: \'news_summary\',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\',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,hideable : true,dataIndex: \'news_title\'
    },{
        text     : \'Active\',width    : 75,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\',width    : 95,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\',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\',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,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();
                }
            }*/]
        })
    });
});
服务器响应以下内容
{
    \"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>&nbsp;<\\/p>\\r\\n                <p>L\\u2019estate \\u00e8 alle porte e desideriamo aggiornarvi sulle attivit\\u00e0 che stiamo organizzando per voi:<\\/p>\\r\\n                <p>&nbsp;<\\/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>&nbsp;<\\/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
}
    

解决方法

这是用extjs4标记的,所以我认为这可能只是更改对象配置以匹配新的配置选项的问题: 您在商店中同时定义了字段和模型。您只需要模型。 idProperty现在已定义为模型的一部分,您已经在商店中拥有它 阅读器现在已定义为代理的一部分,您可以在商店中购买 专门商店类型已弃用(或至少未记录) 您的autoLoad可能会在注册on(\'load \')之前完成。 sortInfo应该定义为排序器 我强烈建议您始终参考官方API来确定“适当的”配置。对于商店:http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Store 这是代码的修改(但未经测试)版本,其中包含要进行的更改的示例:
Ext.define(\'NewsInfo\',{
    extend: \'Ext.data.Model\',idProperty: \'news_id\',// The rest of this should be right
});
存储配置非常不同,并且可能是未加载数据的根源:
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\'
        }
    })
});
    ,我终于找到了我的问题,它不是json版本。 这似乎很愚蠢,但是我在桌面上本地工作,并且正在对服务器(www.domain.com/json.php)发出Json请求。 您可以创建界面而无需在服务器上。但是,如果您使用表格并提交。 您的网站也必须在服务器上。