extjs gridpanel: ColumnModel在gridpanel窗口再次显示时变为null

Question

我定义了一个GridPanel与预先配置的ColumnModel和Store，并把这个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

我实际上只是复制粘贴你的代码到我的应用程序。最后我添加了reportwwindow .show()——它可以工作了!不知道哪里出错了，你能显示所有的代码吗?

请注意，这可能是一个关闭/隐藏的问题，你重新创建你的窗口每次?

编辑:

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

查看详细信息:

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

编辑# 2:

我再次测试了你的代码，它又工作了!我只修改了几个地方，比如额外的逗号——这是我的编辑建议的。(它可能会在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();
    }
});