[OPEN-1271] Collapsed layout doesn't differ between vertical and horizontal

[steffenk]

when having splitbars, you can differ between vertical and horizontal because they have the css-classes:

x-splitbar-h or x-splitbar-v

In collapsed mode you can't differ, eg in my case i only have

x-layout-collapsed x-layout-collapsed-south x-layout-cmini-south

So i have no way to format them different (vertical and horizontal). Should have classes

x-layout-collapsed-h and x-layout-collapsed-v

[steffenk]

this override does the job

Ext.layout.BorderLayout.Region.prototype.getCollapsedEl = function(){
    if(!this.collapsedEl){
        var splitCls = '';
        if(this.split) {
            splitCls = ' x-layout-collapsed-' + (this.position == 'north' || this.position == 'south' ? 'h' : 'v');
        }
        if(!this.toolTemplate){
            var tt = new Ext.Template(
                 '<div class="x-tool x-tool-{id}">&#160;</div>'
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
        }
        this.collapsedEl = this.targetEl.createChild({
            cls: "x-layout-collapsed x-layout-collapsed-"+this.position+splitCls,
            id: this.panel.id + '-xcollapsed'
        });
        this.collapsedEl.enableDisplayMode('block');

        if(this.collapseMode == 'mini'){
            this.collapsedEl.addClass('x-layout-cmini-'+this.position);
            this.miniCollapsedEl = this.collapsedEl.createChild({
                cls: "x-layout-mini x-layout-mini-"+this.position, html: "&#160;"
            });
            this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
            this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
            this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
        }else {
            if(this.collapsible !== false && !this.hideCollapseTool) {
                var t = this.toolTemplate.append(
                        this.collapsedEl.dom,
                        {id:'expand-'+this.position}, true);
                t.addClassOnOver('x-tool-expand-'+this.position+'-over');
                t.on('click', this.onExpandClick, this, {stopEvent:true});
            }
            if(this.floatable !== false || this.titleCollapse){
               this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
               this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
            }
        }
    }
    return this.collapsedEl;
};

[tobiu]

hi steffen,

good job as usual.
+1 to add this to the framework.

kind regards
tobias