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