PDA

View Full Version : Broken border layout (collapse doesn't work properly) when using extended classes



gacowarlock
13 Mar 2011, 1:00 AM
Hi all,

I have a problem with the border layout which means that the collapse function doesn't work properly (in the west panel in my case) when I use an extended class in the west panel.

I have a class application.js where I create the viewport and put the main components together. However, the following code does NOT work (code snippet is from application.js):


// Create the objects
this.navigation = new PN.Navigation(); // See below
this.content = new PN.Content(); // this class doesn't matter for this example, it's only a Panel
this.viewPort = new Ext.Viewport({
items: [
this.navigation,
this.content // The content object
]
});
The class PN.Navigation:


Ext.namespace('PN');

PN.Navigation = Ext.extend(Ext.Panel, {
constructor: function(config)
{
Ext.apply(this, config);
Ext.apply(this.config, config);

PN.Navigation.superclass.constructor.call(this, arguments);
},

initComponent: function() {
PN.Navigation.superclass.initComponent.call(this, arguments);
},

title: 'Navigation',
region: 'west',
width: 200,
layout: 'fit',
split: true,
collapsible: true
});

Ext.reg('pnnavigation', PN.Navigation);
Here's a screenshot of the broken layout. After collapsing, the button to expand is not visible and also the element can not be expanded the right way, i.e. the center panel is not shifted to the right after expanding. In the screenshot, you can see the state after expansion: The navigation panel is on top of the center panel and additionally, the navigation panel does not stay expanded as in the screenshot, it automatically collapses after some seconds.

25110

What I don't understand is that the following setup works, i.e. the collapse function works correctly. The only difference is that I have no separate class which inherits from panel. Instead, I have created the panel for the west region directly in the viewport:


this.content = new PN.Content(); // Only a simple Panel, empty at the moment
this.viewPort = new Ext.Viewport({
items: [
{
title: 'Navigation',
region:'west',
split: true,
width: 200,
collapsible: true, // make collapsible
layout: 'fit',
xtype: 'panel'
},
this.content
]
});


Any ideas what the problem could be?
Thank you in advance for any suggestions!

laurentParis
13 Mar 2011, 11:53 AM
I suggest,

instead :


...
PN.Navigation.superclass.constructor.call(this, arguments);
...


use


...
PN.Navigation.superclass.constructor.call(this, config);
...


or



...
PN.Navigation.superclass.constructor.apply(this, arguments);
...

jratcliff
13 Mar 2011, 6:49 PM
Oh wow, didn't realize this issue still existed. One way to fix this is to change your initComponent to add the collapsible config to the initialConfig property.



initComponent: function() {
this.initialConfig.collapsible = true,
PN.Navigation.superclass.initComponent.apply(this, arguments);
}

gacowarlock
13 Mar 2011, 9:59 PM
Oh wow, didn't realize this issue still existed. One way to fix this is to change your initComponent to add the collapsible config to the initialConfig property.


Thank you very much, that solved it.