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

谢谢你抽出时间来。

Answer 1

我让完全解决了同样的问题，并通过将组件创建更改为factory functions来解决它。

原因是JavaScript中的对象是通过引用传递的，所以在下面的代码片段中，每个网格实例都共享相同的列对象：

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

使用工厂函数方法，您可以像这样创建网格视图：

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

检查发送到reconfigure的列数组。