Facing problem on Window Recreating with grid in Extjs-4 - extjs

Question

I need to render grid component with in the window(with close action destroy) so that i need to create new window and grid component instead of hide and show.
My code is working fine for the first time render but after closing window , i am unable to create it again, getting issue on layout.js
Line: 150
Error: Type mismatch.
************ 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();
Thanks for your time
vinod.P

Answer 1

I had exactly the same problem and solved it by changing the component creation to factory functions.
The reason is that objects in JavaScript are passed by reference, so in the snippet below every grid instance shares the same columns object:
Ext.define('Adapt.view.versionManager.versionGrdView' ,{
extend: 'Ext.grid.Panel',
columns:[
{ header: 'Name', dataIndex: 'versionName', flex: 1 },
{ header: 'State', dataIndex: 'versionState', flex: 1 }
]
});
With the factory function approach you create the grid view like this:
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 }
]
});
Now every new instance get its own copy of the columns array, which solves the problem that a part of the configuration has been destroyed. As a nice side effect, I also noticed that the startup of the application has reduced since I use only factory methods.

Answer 2

Check your Column array which is sent to reconfigure.