PDA

View Full Version : [INFOREQ] Extended Panels do not render correctly after collapsing



KallDrexx
11 Nov 2010, 9:35 PM
After extending some collapsible panels and placing them on the east and west regions of my border layout, I have noticed that once you collapse the panel, it does not render the page correctly.

If you load the TreePanelBug.xds in Ext Designer and hit Preview, you can see the issue. At first, everything looks normal:
https://dl.dropbox.com/u/6753359/ExtScreens/panelbugBefore.png

However, once you hit the collapse button on either panel, the collapse/expand button disappears. If you then click in the general area where the expand button would be, it does not expand correctly (it covers the center content, and doesn't look right).

https://dl.dropbox.com/u/6753359/ExtScreens/panelbugAfter.png

This is not just an issue with the designer, as my custom extended TreePanel has the exact same issue in Chrome. It's actually what prompted me to using the designer because I thought I was coding it wrong.

Edit: As an FYI, I am working around this by having the collaspible panels as non-extended, and inserting an extended panel inside.

meroy
4 Dec 2010, 3:59 AM
Can you provide a test case by following this thread. Thanks.

http://www.sencha.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum

Condor
4 Dec 2010, 5:09 AM
The .xds file generates the following JSON configuration (inlined links):

new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
xtype: 'panel',
title: 'My Panel'
},
{
xtype: 'panel',
title: 'My Panel'
}]
},
{
region: 'east',
xtype: 'treepanel',
title: 'My Tree',
width: 100,
collapsible: true,
root: {
text: 'Tree Node'
},
loader: {

}
},
{
xtype: 'panel',
title: '',
region: 'north',
width: 100,
tbar: {
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'MyButton',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}]
}
}]
}
},
{
region: 'west',
xtype: 'panel',
title: 'My Panel',
width: 100,
collapsible: true
}]
});

I don't see any problem with collapsed regions. They correctly show an expand icon.

KallDrexx
4 Dec 2010, 10:56 AM
The code you posted is incorrect. I'm not sure why the xds generated that but I don't have a license to the designer. Here is code to duplicate the issue (the west panel shows the issue):


MyTreePanel = Ext.extend(Ext.tree.TreePanel, {
title: 'TreePanel',
collapsible: true,
rootVisible: true,
root: { text: 'Tree Node' }
});
Ext.reg('MyTreePanel', MyTreePanel);

Ext.onReady(function () {
new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
xtype: 'panel',
title: 'My Panel'
},
{
xtype: 'panel',
title: 'My Panel'
}]
},
{
region: 'east',
xtype: 'treepanel',
title: 'My Tree',
width: 100,
collapsible: true,
root: {
text: 'Tree Node'
},
loader: {

}
},
{
xtype: 'panel',
title: '',
region: 'north',
width: 100,
tbar: {
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'MyButton',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}]
}
}]
}
},
{
region: 'west',
xtype: 'MyTreePanel',
}]
});
});