Extjs 如何在ext.window.window.modal上显示数据存储网格

在窗口模式上渲染数据存储网格时出现问题

下面是data.store上的代码：

var list_pp = Ext.create('Ext.data.Store', {
        pageSize: itemsPerPage,
        model: 'list_pp',
        proxy: {
        type: 'ajax',
        api: {
            read: pp_get_url,
            create: pp_set_url,
            update: pp_up_url,
            destroy: pp_del_url
        },
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalCount'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            root: 'data'
        }
        },
        //autoLoad: false,
         listeners: {
                write: function(store, operation){
                    var record = operation.getRecords()[0],
                        name = Ext.String.capitalize(operation.action),
                        verb;
        }
        }
    });

以下是在某个页面上呈现的代码：

var grid_pp_list = Ext.create('Ext.grid.Panel', 
{
    width: '100%',
    frame: false,
    loadMask: true,
    collapsible: false,
    title: 'Detail PP',
    store: list_pp,        
    columns: [
        {
            header: 'No PP',
            width: 130,
            sortable: true,
            dataIndex: 'doc_no',
            xtype: 'templatecolumn', 
            tpl: '<a href="./pp/detail/{pp_id}">{doc_no}</a><br/>{pp_id}/{sifat}<br/>'

        }, {
            header: 'Tgl.',
            width: 100,
            sortable: true,
            dataIndex: 'pp_date',
            xtype: 'datecolumn',
            format:'y-m-d'
        }, {
            header: 'SBU Pemesan',
            width: 160,
            sortable: true,
            dataIndex: 'org_order',
            xtype: 'templatecolumn', 
            tpl: '<a href="/org/{org_id}">{org_order}</a>'
        },{
            header: 'Validasi',
            width: 160,
            sortable: true,
            dataIndex: 'org_order',
            xtype: 'templatecolumn', 
            tpl: '<a href="/org/{org_id}">{org_order}</a>'
        },{
            header: 'Action',
            xtype: 'actioncolumn',
            width: 60,
            sortable: false,
            menuDisabled: true,
            xtype: 'templatecolumn',
            tpl: '<a href="./pp/detail/{pp_id}" class="btn btn-small btn-primary">Detail</a>'
        },{
            header: 'Modified by',
            width: 120,
            dataIndex: 'modified_by',
            sortable: true,
            xtype: 'templatecolumn', 
            tpl: '<a href="/user/{modified_by}"><i class="icon-user"></i>{modified_by}</a>'
        },{
            header: 'Modified Date',
            width: 120,
            sortable: true,
            dataIndex: 'modified_date',
            xtype: 'datecolumn',
            format:'y-m-d H:m:s'

    }]

在渲染页面中，一切正常，但在窗口模式中，我无法渲染数据存储。如果有人能给我一个指导或帮助，我将非常感激

从模式栅格中删除宽度属性。您不能以%为单位指定宽度，如果包含的父对象具有合适的布局，则无论如何都无所谓

将项目包装在一个数组中：

items:[modal\u pp]

---

我已经删除了width属性，并将modal_pp包装到[]，但它仍然没有显示任何数据存储结果。我是否应该为将要显示的模态建立一个新的数据存储？是的，这是明智的。使用Ext.define而不是create。然后是网格中的新MyStore（）。您能给出一个解决此问题的示例代码吗？我是extjs新手，对代码实现不太了解。我已经知道如何制作一个简单的数据存储。这对我来说真的很有帮助。看看这里：注意Ext.define的用法，然后是这些组件的用法。

var modal_pp = Ext.create('Ext.grid.Panel', 
    {
    width: '100%',
    frame: false,
    loadMask: true,
    collapsible: false,
    title: 'Modal PP',
    store: list_pp,        
    columns: [
    {
        header: 'No PP',
        width: 130,
        sortable: true,
        dataIndex: 'doc_no',
        xtype: 'templatecolumn', 
        tpl: '<a href="./pp/detail/{pp_id}">{doc_no}</a><br/>{pp_id}/{sifat}<br/>'
    }, {
        header: 'Tgl.',
        width: 100,
        sortable: true,
        dataIndex: 'pp_date',
        xtype: 'datecolumn',
        format:'y-m-d'
    }, {
        header: 'SBU Pemesan',
        width: 160,
        sortable: true,
        dataIndex: 'org_order',
        xtype: 'templatecolumn', 
        tpl: '<a href="/org/{org_id}">{org_order}</a>'
    }],
    dockedItems:
        [{
            xtype: 'pagingtoolbar',
            store: list_pp,   // same store GridPanel 
            dock: 'bottom',
            displayInfo: true   
        }]
    });

text: 'Generate',
        iconCls: 'icon-add',
        handler: function(){
        if (!win) {
            win = Ext.widget('window', {

            closeAction: 'hide',
            width: 1000,
            height: 620,
            minWidth: 300,
            minHeight: 300,
            layout: 'fit',
            resizable: true,
            modal: true,
            items: modal_pp
            });
        }
        win.show();
    }