Экземпляр gridpanel: ColumnModel становится нулевым, когда снова отображается окно GridPanel

Question

Я определил GridPanel с предварительно сконфигурированным ColumnModel и Store и поместил эту GridPanel в Ext.Window; Он отлично работает, когда это окно показывает, однако, если я закрою его и покажу его снова, ColumnModel из GridPanel станет нулевым, чтобы этот 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() в конце - и он работает! Не знаете, что может быть неправильно, можете ли вы показать весь код?

Обратите внимание, что это может быть проблема close/hide, вы каждый раз воссоздаете свое окно?

EDIT:

Попробуйте установить closeAction: 'hide' в конфигурацию окна.

Проверить это для деталей:

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

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