Moving the Split bar does not resize the regions of a Border Layout in IE

[rubynoel]

Hi,
Ext version
3.4.0

Browsers tested against
Internet Explorer 7 and 8
Firefox 10 - works fine

I'm migrating from ext 2.2.1 to 3.4 and I've found a problem in Internet Explorer in split bar move.

I have a west region and center region inside a ViewPort with border layout. The west region has fit layout and has a single details panel in its items config.

In Internet Explorer, moving the Split bar resizes the regions only if the west region's layout is 'border' with the details panel as its center region. It does not work for fit or anchor layouts. It works fine in Firefox though.

It looks as though the problem in IE is the delay it has in calculating the offsetWidth of the panel el. It works if the layout calcualation in split move is done after a timeout to account for this IE delay. Tested this by overriding SplitRegion and it works now with layouts other than border also.

Not sure if this is a bug or I'm missing something but this issue is not present in ext-2.2.1.

Ext.override(Ext.layout.BorderLayout.SplitRegion, {
constructor: function(layout, config, pos){
    Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
    
    this.applyLayout = this.applyFns[pos];
    this.onSplitMoveTask = new Ext.util.DelayedTask(this.doLayoutOnSplitMove, this);
},
onSplitMove : function(split, newSize){
        var s = this.panel.getSize();
        this.lastSplitSize = newSize;
        if(this.position == 'north' || this.position == 'south'){
            this.panel.setSize(s.width, newSize);
            this.state.height = newSize;
        }else{
            this.panel.setSize(newSize, s.height);
            this.state.width = newSize;
        }
        /* Move the commented lines inside a delayed task:
        this.layout.layout();
        this.panel.saveState();*/

       this.onSplitMoveTask.delay(5000); //setting timeout as 5s just for testing
        return false;
    },
 doLayoutOnSplitMove : function(){
        //alert('Delayed Task doLayoutOnSplitMove....'+this.panel.getSize().width);
        this.layout.layout();
        this.panel.saveState();
    }
});

Thanks.

[scottmartin]

Does this online example work for you in IE?
http://dev.sencha.com/deploy/ext-3.4...t/complex.html

Regards,
Scott

[rubynoel]

Found the problem! The issue was with the baseCls config of the west region. Even if I gave a non-existent css class in baseCls, the split move did not work in IE. Once I removed that, it worked fine.

Thanks.

[scottmartin]

Thank you for the follow-up. It will help someone else who may have the same problem.

Regards,
Scott.