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

Posted 2023-02-26

【中文标题】extjs gridpanel：当 GridPanel 窗口再次显示时，ColumnModel 变为空

【英文标题】：extjs gridpanel: ColumnModel becomes null when GridPanel window shows again

【发布时间】：2011-11-21 17:08:42

【问题描述】：

我用预先配置的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

【参考方案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();
    
);

【讨论】：

感谢您的回复！我没有很清楚地表达自己。我刚刚附上了整个代码sn-p。当我点击右上角的 close_icon 关闭此窗口后，再次显示此窗口时会出现问题。当它再次显示时，网格面板丢失了它的标题，因为它的 ColumnModel 变为空/未定义。