PDA

View Full Version : Problem with GridPanel inside a window



kataria.mx
16 Aug 2012, 11:50 PM
We have an issue when we create a window with a grid panel inside it.
It works fine for the first time, but when the window is displayed a second time, it throws an error.
Error: el is null
el is null



chrome://firebug/content/blank.gif


el.addCls.apply(el, arguments);



We found another issue wherein the problem is with a grid with checkbox selection model,
http://www.sencha.com/forum/showthread.php?233261-Problem-with-grid-inside-window-with-checkbox-selection
but it says the the issue could not be reproduced and the thread is closed so posting here.

Following is a test case that reproduces the issue, without the checkbox model, its just a simple grid inside a window.



Ext.define('TestWindow',
{
extend : 'Ext.window.Window',
constructor : function() {
this.callParent(arguments);
},

title : 'Test window with a grid panel',
width : 400,
height : 400,
modal : true,
layout : {
type : 'border'
},
items : [
Ext.create('Ext.grid.Panel',
{
region : 'center',
title : 'Test Grid',
hideHeaders : true,
columns : [{ header : 'Name',
flex : 1
} ]
})
]
}
);

Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
width: 400,
height: 300,
title: 'Test Case for Window',
renderTo: Ext.getBody(),
layout: 'auto',
items: [{
xtype : 'button',
text : 'click me',
handler : function() {
Ext.create('TestWindow').show();
}
}]
});
});

vietits
17 Aug 2012, 1:48 AM
Your problem is that you create and share objects at class prototype. Here are some solutions for your problem:
1. Use xtype to define objects instead of using Ext.create(). This way you will delay objects until you create an instance from class you defined.


Ext.define('TestWindow', {
extend : 'Ext.window.Window',
constructor : function() {
this.callParent(arguments);
},
title : 'Test window with a grid panel',
width : 400,
height : 400,
modal : true,
layout : {
type : 'border'
},
items : [
{
xtype: 'grid',
region : 'center',
title : 'Test Grid',
hideHeaders : true,
columns : [{
header : 'Name',
flex : 1
}]
}
// Ext.create('Ext.grid.Panel', {
// region : 'center',
// title : 'Test Grid',
// hideHeaders : true,
// columns : [{
// header : 'Name',
// flex : 1
// }]
// })
]
});

2. In case you can't not apply the above solution, let move creating objects inside constructor() or initComponent(). Something likes this:


Ext.define('TestWindow', {
extend : 'Ext.window.Window',
constructor : function() {
this.items = [
Ext.create('Ext.grid.Panel', {
region : 'center',
title : 'Test Grid',
hideHeaders : true,
columns : [{
header : 'Name',
flex : 1
}]
})
];
this.callParent(arguments);
},
title : 'Test window with a grid panel',
width : 400,
height : 400,
modal : true,
layout : {
type : 'border'
},
// items : [
// Ext.create('Ext.grid.Panel', {
// region : 'center',
// title : 'Test Grid',
// hideHeaders : true,
// columns : [{
// header : 'Name',
// flex : 1
// }]
// })
// ]
});

kataria.mx
17 Aug 2012, 3:42 AM
Hey. Thank you so much.
It works with the solution given by you.

But I dont quite understand why there is a difference in behavior in mine and your approach.
Is it recommended to always use xtype or constructor/initComponent to create components
rather than using Ext.create() directly in items config ?

vietits
17 Aug 2012, 5:34 AM
As I said in my previous post, your problem is sharing objects on class prototype.

With your example and your approach, you created one grid panel and use this component for all instances created from TestWindow class. The first time you create an instance from TestWindow class, everything is OK. When you close window, it will destroy window by default and also destroy all its components including the sharing grid panel. After that, if you create other instances of TestWindow you will encounter problem because the sharing grid panel is no longer exist.

With my approach, creating grid panel is delayed to the time of creating of TestWindow instance. Each time an instance is created, a new grid panel is created and is used for this instance only, not shared with other instances.

This is just one problem that is caused by sharing objects on class prototype. Sharing objects likes this will also cause many other troubles in other cases.

Hope that you will understand what I mean.