extjs gridpanel：当 GridPanel 窗口再次显示时，ColumnModel 变为空

Question

我用预先配置的ColumnModel和Store定义了一个GridPanel，并将这个GridPanel放在一个Ext.Window中；当这个窗口显示时它工作正常，但是，如果我关闭它并再次显示它，GridPanel 的 ColumnModel 变为 null，因此该 GridPanel 无法正确呈现。

已更新（所有代码）

 var stSummary = new Ext.data.JsonStore({ //define the store for Summary_Grid
        fields : [
        {
            name: 'recID'
        }, {
            name : 'name',
        }],
        data: []
    });

var colModelSummary = { //define the ColumnModel for Summary_Grid
    columns:
    [
        {
            header : "ID",
            width : 50,
            sortable : true,
            menuDisabled: true,
            dataIndex : 'recID'
        },
        {
            header : "Name",
            width : 100,
            sortable : true,
            menuDisabled: true,
            dataIndex : 'name'
        }
    ]
};

var reportConfig = {
    id : 'Report_Window',
    width : 250,
    floating : true,
    style : {
        opacity : 0.7,
    },
    title : "Report",
    layout: 'fit',
    items : [{
        xtype: 'tabpanel',
        id: 'Report_Tab',
        height: 200,
        activeTab: 1,
        items: 
        [
            {
                xtype : 'grid',
                store : stSummary,
                colModel : new Ext.grid.ColumnModel(colModelSummary),
                stripeRows : true,
                id : "Summary_Grid",
                title : "Summary at",
                sm : new Ext.grid.RowSelectionModel({
                    singleSelect : true
                }),
                listeners: {
                    'beforerender': function() {
                        console.log(this.getColumnModel().getColumnCount());
                    }
                }
            }, 
            {
                xtype : 'form',
                id : 'Report_Form',
                title: 'Item Report',
                frame : true,
                labelAlign : 'left',
                bodyStyle : 'padding:2px',
                autoScroll: true,
                layout : 'column',
                items : []  
            }
        ]
    }],
    resizable : {
        dynamic : true
    }
};
var reportWindow = new Ext.Window(reportConfig);

reportWindow.show();

document.onclick = myClickHandler;


    function myClickHandler() {
      if(!Ext.getCmp('Report_Window')) {
        var reportWindow = new Ext.Window(reportConfig);
      }

      Ext.getCmp('Report_Window').show();
    }
});

和错误：

Uncaught TypeError: Cannot read property 'length' of undefined
Ext.grid.ColumnModel.Ext.extend.getColumnCount                  ext-all.js:11

Answer 1

我实际上只是将您的代码复制粘贴到我的应用程序中。我最后添加了 reportWindow.show() - 它有效！不知道有什么问题，你能显示所有代码吗？

请注意，这可能是关闭/隐藏问题，您是否每次都重新创建窗口？

编辑：

尝试将closeAction: 'hide' 设置为您的窗口配置。

查看详情：

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-cfg-closeAction

编辑 #2：

我再次测试了您的代码，它又可以工作了！我只更正了一些东西，比如额外的逗号——我的 resharper 建议这样做。 （它可能会导致 IE 出现问题）然后我将它放入 Ext.onReady - 它可以工作！ Ext.version == '3.2.1'

检查整个代码：

Ext.onReady(function() {
    var stSummary = new Ext.data.JsonStore({
//define the store for Summary_Grid
            fields: [
                {
                    name: 'recID'
                }, {
                    name: 'name'
                }],
            data: []
        });

    var colModelSummary = {
//define the ColumnModel for Summary_Grid
        columns:
            [
                {
                    header: "ID",
                    width: 50,
                    sortable: true,
                    menuDisabled: true,
                    dataIndex: 'recID'
                },
                {
                    header: "Name",
                    width: 100,
                    sortable: true,
                    menuDisabled: true,
                    dataIndex: 'name'
                }
            ]
    };

    var reportConfig = {
        id: 'Report_Window',
        width: 250,
        floating: true,
        style: {
            opacity: 0.7
        },
        title: "Report",
        layout: 'fit',
        items: [{
            xtype: 'tabpanel',
            id: 'Report_Tab',
            height: 200,
            activeTab: 1,
            items:
                [
                    {
                        xtype: 'grid',
                        store: stSummary,
                        colModel: new Ext.grid.ColumnModel(colModelSummary),
                        stripeRows: true,
                        id: "Summary_Grid",
                        title: "Summary at",
                        sm: new Ext.grid.RowSelectionModel({
                            singleSelect: true
                        }),
                        listeners: {
                            'beforerender': function() {
                                console.log(this.getColumnModel().getColumnCount());
                            }
                        }
                    },
                    {
                        xtype: 'form',
                        id: 'Report_Form',
                        title: 'Item Report',
                        frame: true,
                        labelAlign: 'left',
                        bodyStyle: 'padding:2px',
                        autoScroll: true,
                        layout: 'column',
                        items: []
                    }
                ]
        }],
        resizable: {
            dynamic: true
        }
    };
    var reportWindow = new Ext.Window(reportConfig);

    reportWindow.show();

    document.onclick = myClickHandler;


    function myClickHandler() {
        if (!Ext.getCmp('Report_Window')) {
            reportWindow = new Ext.Window(reportConfig);
        }

        Ext.getCmp('Report_Window').show();
    }
});