PDA

View Full Version : What does OVERNEST mean?



jarlau
14 Aug 2009, 8:55 PM
I read many posts about people always OVERNEST by mistake. (usually in 'tabpanel' and 'border' layout), But what actually OVERNEST means?

I want to do something like below case 1, but always with problems(render, resize...etc problems).
Case 1:


var grid1 = Ext.grid.GridPanel({
region: 'center',
...// no matter if I assign layout: 'fit' here.
});
var grid2 = Ext.grid.GridPanel({
region: 'west',
width: 300
});
{
layout: 'border',
items: [grid, grid2]
}


If I need it to show correctly, I modified the code as below then everything seems ok.


var grid1 = Ext.grid.GridPanel({
});
var grid2 = Ext.grid.GridPanel({
});
{
layout: 'border',
items: [{
regoin: 'center',
// xtype: 'panel', <-- mean overnested?
layout: 'fit',
items: grid
}, {
regoin: 'west',
width: 300,
layout: 'fit',
items: grid2
}]
}

But does it meant overnested? or just if I add xtype: 'panel' means overnest?
I did read the feed-viewer example but I'm still confused. Thanks for clarification.

P.S. I have another overnested question about tabpanel, but I'd ask it later.

evant
14 Aug 2009, 9:00 PM
Overnesting means have redundant panels in the hierarchy:



new Ext.Viewport({
layout: 'border',
items: {
region: 'center',
layout: 'fit',
items: {
xtype: 'grid'
//.....
}
}
});


There's no need to have a panel containing the grid (unless you have a specific reason). The grid should BE the center.

jarlau
14 Aug 2009, 9:34 PM
Thanks for your quick reply.
Just want to confirm my 'case 1' will not work, right? but why?

In your code:


items: {
region: 'center',
layout: 'fit',
items: {
xtype: 'grid'
//.....
}
}

What's the default component of the red items? 'container', 'panel'...or it is plain html? do I need to use 'xtype' there in any case?

evant
14 Aug 2009, 9:35 PM
It will work, it's just un-necessary.

Overnesting often causes layout problems. Default type is panel.

Animal
14 Aug 2009, 10:41 PM
You're getting close.

the default type is...

http://extjs.com/deploy/dev/docs/?class=Ext.Container&member=defaultType

So any time you have {...} That is a Panel.

So



new Ext.Viewport({
layout: 'border',
items:[{
region: 'west',
layout: 'fit',
items: myTreePanel
}, {
region: 'center',
layout: 'fit',
items: myGridPanel
}]
});


is overnested. There is NO POINT wrapping the TreePanel and GridPanel in those Panels.

Just configure the TreePanel with region: 'west' and the GridPanel with region: 'center'

and use



new Ext.Viewport({
layout: 'border',
items:[ TreePanel, GridPanel ]
});

15 Aug 2009, 5:35 AM
Nige, you should probably add that { and } are not "Panels", but are configuration objects that are generally used to create instances of Panel. This stems from the Container class.


It's not true in the case where you need buttons:

tbar: [{text:'btn1'}, {text:'btn2'}]

The *key* is knowing what the default "xtype" is for the container for which you are specifying a generic "configuration object" for, that is the object has no 'xtype' override property.'

hope this helps

Animal
15 Aug 2009, 6:22 AM
Yes, it's just so common to create Panels with that though. It needs to be realized more widely that {...} create the defaultType. There are a few Containers where defaultType is not Panel. Toolbar and Menu being two of them.

15 Aug 2009, 6:57 AM
i really wish we could add formPanel to that list.

Animal
15 Aug 2009, 7:07 AM
Yes, FormPanel's defaultType should really be 'textfield'

16 Aug 2009, 3:56 AM
I asked for that improvement well before 3.0 came out. oh well. :-\

jarlau
26 Aug 2009, 7:05 AM
Eventually I've refactored all my code to eliminated overnesting problem. Thanks all for pointing me in the right direction. And I found that the common mistake section of FAQ (http://extjs.com/learn/Ext_FAQ_layout#Common_Mistakes) already mentioned it, but I still see many people in the forum have such problem. So I recommended people to read through the FAQ (http://extjs.com/learn/Ext_FAQ) and you will find that you can learn more and more there.