PDA

View Full Version : Split maxSize and minSize do not work in custom class



piyushjain7
25 Sep 2009, 8:10 PM
Unzip the attached zip file and copy the directory to examples folder.

You will notice that the West region can be resized to a min width of 50 and has no limit on the max width which are the defaults for split. However if you look at the "mywest" class I did apply a default minSize and maxSize in the "initComponent".


When you resize the East region, you will notice that it can only be resized to a max of 350 and min of 200. I have used the same mywest class, but applied the minSize and maxSize in the initial config.

Here is the js source code for this example:



mywest = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
split: true,
minSize: 200,
maxSize: 350,
width: 250,
html: "<h3>WEST</h3>"
});
}
});

Ext.reg("mywest", mywest);

Ext.onReady(function(){
var vp = new Ext.Viewport({
layout: "border",
items:[{
region: "center",
html: "<h3>CENTER</h3>"
},{
region: "west",
xtype: "mywest"
},{
region: "east",
xtype: "mywest",
minSize: 200,
maxSize: 350
}]

});

});



I dig down the source code and found that this is because of these lines (lines 111, 112) in BorderLayout:


this[pos] = pos != 'center' && c.split ?
new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
this[pos].render(target, c);

In the above code SplitRegion is being created from "c.initialConfig" and not "c".

Is this a bug with extjs code? If not what is a better way to put a default minSize and maxSize in a pre-configured class.

Condor
26 Sep 2009, 2:09 AM
There are several things wrong with your initComponent code:
1. You are not calling the superclass initComponent.
2. You are only applying the config to 'this', but not to 'this.initialConfig'.

Also, overriding initComponent is so 'Ext 2.x' ;)

The recommended method in Ext 3 is to override the constructor:

mywest = Ext.extend(Ext.Panel,{
constructor: function(config){
mywest.superclass.constructor.call(this, Ext.apply({
split: true,
minSize: 200,
maxSize: 350,
width: 250,
html: "<h3>WEST</h3>"
}, config));
}
});

piyushjain7
26 Sep 2009, 6:25 AM
Ok. Agreed I didn't add the call to superclass initComponent, that was an oversight on my part, but it still don't work.

I actually like the constructor way of doing this, but was not aware of this, since all the learning manuals have been specifying it to use initComponent.

Thanks.

Condor
26 Sep 2009, 6:38 AM
The abilibty to specify the constructor in Ext.extend was added in Ext 3 and some manuals haven't been updated yet.

If you're still on Ext 2.x you should have used:

mywest = Ext.extend(Ext.Panel,{
initComponent: function(){
var config = {
split: true,
minSize: 200,
maxSize: 350,
width: 250,
html: "<h3>WEST</h3>"
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
mywest.superclass.initComponent.call(this);
}
});

Animal
26 Sep 2009, 6:47 AM
The manual contains that information.

piyushjain7
26 Sep 2009, 6:48 AM
Thanks Condor.