PDA

View Full Version : Panels' expand button missing after collapse



[Daniel]
5 Sep 2010, 9:50 PM
Good morning,

I'm having a strange behavior of an Ext.Panel after collapse. The expand button is missing; once collapsed it can't be expanded again.

Screenshot before:
22242


Screenshot after:
22243

And here's the code:

PNViewPort = Ext.extend(Ext.Viewport, {
initComponent: function() {
this.layout = 'border';
PNViewPort.superclass.initComponent.call(this);
}
});

PNWestPanel = Ext.extend(Ext.tree.TreePanel, {
initComponent: function() {
this.title = 'Navigation';
this.region = 'west';
this.width = 200;
this.minSize = 100;
this.maxSize = 300;

this.layout = 'fit';

this.split = true;
this.collapsible = true;

this.root = new Ext.tree.TreeNode();

PNWestPanel.superclass.initComponent.call(this);
}
});

PNCenterPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
this.title = "Verwaltung";
this.region = "center";
PNCenterPanel.superclass.initComponent.call(this);
}
});

PNNorthPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
this.title = "FSFSF";
this.region = "north";

PNNorthPanel.superclass.initComponent.call(this);
}
});

var viewPort = new PNViewPort({
items: [
new PNWestPanel(),
new PNCenterPanel(),
new PNNorthPanel()
]
});Thanks for your help in advance.

P.S: I know that it makes no sense to create constructors for this as I'm going to call them only once. Will change that later on.

laurentParis
5 Sep 2010, 10:01 PM
May be solution is on another way... have you checking css ?

[Daniel]
5 Sep 2010, 10:05 PM
Hi,

sorry - forgot to mention: Checked the rendered html code with Firebug, there is no HTML code rendered within the collapsed area.

The rendered html code is:


<div id="ext-comp-1001-xcollapsed" class="x-layout-collapsed x-layout-collapsed-west" style="display: block; width: 20px; height: 554px; position: absolute; visibility: visible; left: 0px; top: 27px; z-index: 20;"></div>

Thus, I suppose it is not a CSS problem :-)

Animal
5 Sep 2010, 11:29 PM
Why did you create a subclass? Isn't the code for just CONFIGURING a Panel simpler for YOU to write?

[Daniel]
5 Sep 2010, 11:30 PM
You're right:


P.S: I know that it makes no sense to create constructors for this as I'm going to call them only once. Will change that later on. But that shouldn't cause the problem, should it?

Animal
5 Sep 2010, 11:32 PM
It can if the properties are read at construction time and not at initComponent.

[Daniel]
5 Sep 2010, 11:34 PM
Okay, I wanted to implement something else but in order not to waste your time anylonger (if this is the solution), I'm going to rewrite the code now.

[Daniel]
5 Sep 2010, 11:41 PM
Ye, that did it.

Thanks for your help, even though I do not really understand the reason.
Are my properties overwritten by initComponent? If so, shouldn't initComponent check if there were properties set before?

Condor
6 Sep 2010, 12:19 AM
Use:

PNWestPanel = Ext.extend(Ext.tree.TreePanel, {
initComponent: function() {
var config = {
title: 'Navigation',
region: 'west',
width: 200,
minSize: 100,
maxSize: 300,
split: true,
collapsible: true,
root: new Ext.tree.TreeNode()
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
PNWestPanel.superclass.initComponent.call(this);
}
});
(I highlighted the part you were missing)

Animal
6 Sep 2010, 12:35 AM
If you MUST.

But there's still no point creating a subclass unless you are really creating a class to use as a class.

Condor
6 Sep 2010, 12:39 AM
Animal is suggesting something like:

PNWestPanel = function(config){
return new Ext.tree.TreePanel(Ext.apply({
title: 'Navigation',
region: 'west',
width: 200,
minSize: 100,
maxSize: 300,
split: true,
collapsible: true,
root: new Ext.tree.TreeNode()
}, config));
};

Animal
6 Sep 2010, 12:41 AM
Or just



var theWestPanel = new Ext.tree.TreePanel({
title: 'Navigation',
region: 'west',
width: 200,
minSize: 100,
maxSize: 300,
split: true,
collapsible: true,
root: new Ext.tree.TreeNode()
});