javascript - 一旦将数据设置为GridPanel存储，Panel内部的Sencha ExtJS Gridpanel不会呈现

我在垂直面板内有一个Gridpanel，以便可以在GridPanel下方放置一些东西。直到我在gridpanel上设置store属性，一切都没有问题。然后，窗口变成白色，什么也没有呈现。我一定在误会一些小事。

newWindow = Ext.create('Ext.window.Window', {
    title: 'View Data',
    height: 400,
    width: 600,
    layout: 'fit',
    bodyPadding: 5,
    resizable: false,
    items:
    [
        { xtype:'panel', layout:{ type:'vbox', pack:'center' }, items:
            [
                { xtype: 'gridpanel', height:200, columns:
                    [
                        { header: 'A', dataIndex: 'a'},
                        { header: 'B', dataIndex: 'b' },
                        { header: 'M', dataIndex: 'm' },
                        { header: 'i', dataIndex: 'i' }
                    ], store: store, forceFit: true, border: true
                },
                { xtype:'panel', title: 'Hot Load',  border: true, margin:'5', height:150, width: 500, layout:{ type:'hbox', pack:'center' }, bodyBorder: true, collapsible: true }
            ]
        }
    ],
    buttons:
    [
        { text: 'OK' } ,
        { text: 'Cancel' }
    ]
});

最佳答案

您存储中的数据可能以某种方式存在问题-在此处的代码中没有显示。

我确实使用商店创建了一个jsFiddle。如果您用一些示例数据填充商店，但仍然遇到渲染问题，那么我将从类似于该jsFiddle的内容开始，并向其中添加额外的格式/配置。

我确实删除了多余的面板，而jsFiddle并没有真正处理Ext.window.Window，因此我仅在此处使用了一个面板。

http://jsfiddle.net/LgyLsmv2/

Ext.define('Example', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'a'
    }, {
        name: 'b'
    }, {
        name: 'm'
    }, {
        name: 'i'
    }]
});

var store = Ext.create('Ext.data.Store', {
    model: 'Example',
    data: [{
        a: 'test A',
        b: 'test B',
        m: 'test M',
        i: 'test I'
    }, {
        a: 'test A',
        b: 'test B',
        m: 'test M',
        i: 'test I'
    }, {
        a: 'test A',
        b: 'test B',
        m: 'test M',
        i: 'test I'
    }]
});

newWindow = Ext.create('Ext.panel.Panel', {
    title: 'View Data',
    height: 400,
    width: 600,
    //layout: 'fit',
    //bodyPadding: 5,
    //resizable: false,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'gridpanel',
        //height: 200,
        columns: [{
            header: 'A',
            dataIndex: 'a',
            flex: 1
        }, {
            header: 'B',
            dataIndex: 'b',
            flex: 1
        }, {
            header: 'M',
            dataIndex: 'm',
            flex: 1
        }, {
            header: 'i',
            dataIndex: 'i',
            flex: 1
        }],
        store: store //,
        //forceFit: true,
        //border: true
    }, {
        xtype: 'panel',
        title: 'Hot Load',
        //border: true,
        //margin: '5',
        height: 150,
        width: 500 //,
        //layout: {
            //type: 'hbox',
            //pack: 'center'
        //},
        //bodyBorder: true,
        //collapsible: true
    }],
    buttons: [{
        text: 'OK'
    }, {
        text: 'Cancel'
    }]
});

关于javascript - 一旦将数据设置为GridPanel存储，Panel内部的Sencha ExtJS Gridpanel不会呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26280552/