Столкнувшись с проблемой воссоздания окна с сеткой в ​​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

У меня была точно та же проблема, и я решил ее, изменив создание компонента на фабричные функции .

Причина в том, что объекты в 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

Проверьте ваш массив столбцов, который отправляется для перенастройки.