PDA

View Full Version : ext.extend(ext.panel)... does strange things...



wceuppens
30 Jun 2010, 6:51 AM
I know it probably a configuration parameter I missed somewhere, somehow... but still:

I have 2 versions of the east panel in my viewport, a "procedural" and on "object".

The "procedural" is:

Ext.namespace('east');

east.Panel = new Ext.Panel({
region : 'east',
id : 'east',
title : 'East Side',
width : 225,
collapsible : true,
collapseMode: 'mini',
});and the "object" is:

Ext.ns("APP.panel");

APP.panel.East = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.apply( this, {
region : 'east',
title : 'East Side',
width : 225,
collapsible : true,
collapseMode: 'mini',
});
APP.panel.East.superclass.initComponent.call(this);
}
});
Ext.reg('APP.panel.East', APP.panel.East);When I use "east-panel" in my viewport, I get a mini-collapse-expand bar and collapsing/expanding works perfectly.
But when I use "{xtype: 'APP.panel.East'}" in my viewport, I get a lot of unexpected behaviour:
1. There is no mini-collapse-expand bar:
21193
2. When I use the collapse button, there is no expand button available:
21194
3. When I click on this sidebar without the expand button, my east panel expands, but auto-collapses when I move my mouse out of the east region.

Admit that this is a somewhat strange behaviour.
My question is of course: what did I do wrong this time?

CrazyEnigma
30 Jun 2010, 7:18 AM
Specify the split parameter.

Animal
30 Jun 2010, 7:23 AM
Use a constructor instead of initComponent.

I know you've cargo culted in code from Saki, but that's not the best way.

wceuppens
30 Jun 2010, 7:24 AM
--> in response to CrazyEnigma
I did, but the only difference is that before collapse, I can resize the east-region. After collapsing, I get the same situation as before. Even resizing is no longer possible.

Animal
30 Jun 2010, 7:27 AM
The layout class uses properties from initialConfig.

Which only gets set by the constructor.

CrazyEnigma
30 Jun 2010, 7:28 AM
Maybe a min and max was not specified. I can only refer you to the BorderLayout (http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.BorderLayout)reference.

Animal
30 Jun 2010, 7:34 AM
Message getting lost.

CrazyEnigma
30 Jun 2010, 7:45 AM
Sorry. Animal is right: constructor is executed before initComponent

wceuppens
30 Jun 2010, 7:59 AM
So I tried the following code, but the result are identical: exactly the same problems as mentioned above.

Ext.ns("APP.panel");

APP.panel.East = Ext.extend(Ext.Panel, {
constructor : function() {
Ext.apply( this, {
region : 'east',
title : 'East Side',
width : 225, // give east and west regions a width
collapsible : true,
collapseMode: 'mini'
});
APP.panel.East.superclass.constructor.call(this);
}
});
Ext.reg('APP.panel.East', APP.panel.East);

wceuppens
30 Jun 2010, 10:39 AM
Yes animal, I'm borrowing heavily - I'm living by example - but not only from Saki, also from Jesus Garcia (have his extjsinaction).
Something I've noticed with Extjs is that there is extensive API documentation and quit a few tutorials around; but what's missing is a user guide. I nowhere found this thing with constructors and initcomponent in any documentation, nor how these interact with extjs components.
This said, I found (yes, through an example from Jesus) the solution to my problem.
The following works perfectly:

Ext.ns("APP.panel");

APP.panel.East = Ext.extend(Ext.Panel, {
constructor : function(config) {
config = config || {};
Ext.applyIf( config, {
region : 'east',
title : 'East Side',
split : true,
width : 225, // give east and west regions a width
collapsible : true,
collapseMode: 'mini',
collapsed : true,
});
APP.panel.East.superclass.constructor.call(this, config);
}
});
Ext.reg('APP.panel.East', APP.panel.East);So this thread can be listed as SOLVED.
Thanks again for your help.

30 Jun 2010, 10:58 AM
Willy,

The portion about initComponent and the constructor is discussed in detail in the Component life cycle section.

wceuppens
30 Jun 2010, 11:11 AM
Jesus, that's exactly what I'm talking about: in 3.3.1(4), it is mentioned that "initComponent is used as a supplement to the constructor", and in chapters 16-17 there are some examples of "constructor" and "initComponent", but how do I know which one to use when? Do I always use "constructor", or does it depend on ... Still an enigma to me, and I didn't find any document that discusses these type of issues.
I mean, animal tells me that - of course - I have to use constructor in stead of initComponent in the case above. But I wonder how I am supposed to know this?