Question

我在窗口模式上渲染数据存储网格时遇到问题。

这是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'

    }]

这是窗口模态的代码：

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();
    }

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

Answer 1

从模态网格中删除宽度属性。你不能指定以％为单位的宽度，如果你的包含父项具有适合的布局，那么无论如何都无关紧要。
包装数组中的项目：items: [modal_pp]

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

1 个答案: