Extjs-4でグリッドを使って再描画するウィンドウ

Question

グリッドコンポーネントをウィンドウ内にレンダリングする必要があります（クローズアクションが破棄されます）ので、非表示と表示の代わりに新しいウィンドウとグリッドコンポーネントを作成する必要があります。

私のコードは、レンダリング初めて正常に動作しているが、ウィンドウを閉じた後、私はlayout.js

ライン上の問題を得て、再びそれを作成することができません：150 エラー：型が一致しません。お時間を

************ getting issue in the below method and "dom" is undefined********* 

moveItem : function(item, target, position) { 
// Make sure target is a dom element 
target = target.dom || target; 
if (typeof position == 'number') { 
position = target.childNodes[position]; 
} 
target.insertBefore(item.el.dom, position || null); //dom is undefined 
item.container = Ext.get(target); 
this.configureItem(item); 
this.childrenChanged = true; 
} 


************ 
My controller and view of(grid and window) i have attached .Please identify where i am going wrong 
************ 

Code: 

************************************************************************** 
Window Controller 
************************************************************************** 

Ext.define('Adapt.controller.versionManager.verManWinCont', { 
      extend : 'Ext.app.Controller', 
      views : ['versionManager.verManWinView'], 
      init : function() {    
       this.control({ 
          'verManWindow' : {      
           afterrender : this.verManWindowAfterRender 
          } 
         }); 
      }, 
      verManWindowAfterRender : function(win, options) { 
      }); 


************************************************************************** 
window View 
************************************************************************** 
Ext.define('Adapt.view.versionManager.verManWinView' ,{ 
    extend: 'Ext.window.Window', 
    requires: ['Adapt.controller.versionManager.versionCont','Adapt.view.versionManager.versionGrdView', 'Adapt.store.versionManager.versionStor'], 
    alias : 'widget.verManWindow', 
    constructor: function (config) { 
    this.callParent([config]);}, 
    layout: 'fit', 
    closeAction :'destroy', 
    items: [{xtype: 'versionGrd'}],  
    autoShow :true, 
    width : 580, 
    height : 338, 
    closable : true, 
    plain : true  
}); 

************************************************************************** 
Grid Controller 
************************************************************************** 
Ext.define('Adapt.controller.versionManager.versionCont', { 
      extend : 'Ext.app.Controller', 
      views : ['versionManager.versionGrdView'],   
      stores : ['versionManager.versionStor'], 
      models : 'Adapt.model.versionManager.versionModl',  
      init : function() { 

       debugger; 
       this.control({ 
          'versionGrd' : { 
           itemdblclick : this.versionGridDoubleClick, 
           afterrender : this.versionGridAfterRender 

          } 
         }); 

      }, 
      versionGridAfterRender : function(grid, options) {debugger; 


      }   
     }); 



************************************************************************** 
Grid View 
************************************************************************** 

Ext.define('Adapt.view.versionManager.versionGrdView' ,{ 
    extend: 'Ext.grid.Panel', 
    requires: ['Ext.grid.*','Adapt.view.versionManager.versionCreateView'], 
    alias : 'widget.versionGrd', 
    store: 'versionManager.versionStor', 
    columns:[ 
       {header: 'Name', dataIndex: 'versionName', flex: 1}, 
       {header: 'State', dataIndex: 'versionState', flex: 1} 
      ], 
    constructor: function (config) {debugger; 
    this.callParent([config]);}, 
    dockedItems: [] 

}); 
************************************************************************ 

(creating and showing in this handler) 

In viewport Toolbar button handler(Controller) 

this.getController('versionManager.verManWinCont'); 
this.getController('versionManager.versionCont');   
new Adapt.view.versionManager.verManWinView();//.show(); 

おかげ vinod.P

Answer 1

私は正確同じ問題を抱えていたとfactory functionsにコンポーネントの作成を変えることによってそれを解決しました。あなたのようなグリッドビューを作成

Ext.define('Adapt.view.versionManager.versionGrdView' ,{ 
    extend: 'Ext.grid.Panel', 
    columns:[ 
       { header: 'Name', dataIndex: 'versionName', flex: 1 }, 
       { header: 'State', dataIndex: 'versionState', flex: 1 } 
      ] 
}); 

ファクトリ関数のアプローチで：

理由は、すべてのグリッド・インスタンス以下のスニペットで同じ列オブジェクトを共有してJavaScriptでのオブジェクトは、参照で渡さであるということですこれは：

Ext.define('Adapt.view.versionManager.versionGrdView' ,{ 
    extend: 'Ext.grid.Panel', 

    initComponent: function() { 
    config = Ext.apply({}, { items: this.buildColumns() }); 
    Ext.apply(this, Ext.apply(this.initialConfig, config)); 
    this.callParent(); 
    } 

    buildColumns: function() { 
    return [ 
     { header: 'Name', dataIndex: 'versionName', flex: 1 }, 
     { header: 'State', dataIndex: 'versionState', flex: 1 } 
    ] 
}); 

これで、新しいインスタンスには、構成の一部が破棄されたという問題を解決する列配列のコピーがそれぞれ作成されます。良い副作用として、私はファクトリメソッドだけを使用しているので、アプリケーションの起動が減ったことに気付きました。

Answer 2

再設定するために送信される列配列を確認してください。