Split maxSize and minSize do not work in custom class

[piyushjain7]

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]

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]

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]

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]

The manual contains that information.

[piyushjain7]

Thanks Condor.