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

Question

我给出我用过的代码.. 请帮助...

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',     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();
                }
            }*/]
        })
    });
});

服务器响应以下内容：

{
    "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
}

Answer 1

这是用 extjs4 标记的，所以我认为这可能只是更改对象配置以匹配新的配置选项的问题：

• 您在商店中定义了两个字段和一个模型。您只需要型号。
• idProperty 现在被定义为模型的一部分，您将其放在商店中
• 读者现在被定义为代理的一部分，您将其放在商店中
• 专门的商店类型已被弃用（或至少未记录）
• 您的自动加载可能正在完成在您的 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'
        }
    })
});

Answer 2

我终于找到了我的问题，它不是 json 版本。
这可能看起来很愚蠢，但我正在本地桌面上工作，并且正在向服务器（www.domain.com/json.php）发出 Json 请求。

您无需在服务器上即可创建界面。但如果你使用表单并提交。
您的网站还必须位于服务器上。