SplitLayoutRegion.js

/**
 * @class Ext.SplitLayoutRegion
 * @extends Ext.LayoutRegion
 * Adds a splitbar and other (private) useful functionality to a LayoutRegion
 */
Ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
    this.cursor = cursor;
    Ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
    if(config.split){
        this.hide();
    }
};

Ext.extend(Ext.SplitLayoutRegion, Ext.LayoutRegion, {
    splitTip : 'Drag to resize. Double click to hide.',
    applyConfig : function(config){
        Ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
        if(config.split){
            if(!this.split){
                var splitEl = Ext.DomHelper.append(this.mgr.el.dom, 
                        {tag: 'div', id: this.el.id + '-split', cls: 'x-layout-split x-layout-split-'+this.position, html: ' '});
                /** The SplitBar for this region @type Ext.SplitBar */
                this.split = new Ext.SplitBar(splitEl, this.el);
                this.split.on('moved', this.onSplitMove, this);
                this.split.useShim = config.useShim === true;
                YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
                this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
                this.split.el.dom.title = this.splitTip;
                if(config.collapsible !== false){
                    this.split.el.on('dblclick', this.collapse,  this);
                }
            }
            if(typeof config.minSize != 'undefined'){
                this.split.minSize = config.minSize;
            }
            if(typeof config.maxSize != 'undefined'){
                this.split.maxSize = config.maxSize;
            }
        }
    },
    
    getMaxSize : function(){
         var cmax = this.config.maxSize || 10000;
         var center = this.mgr.getRegion('center');
         return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
    },
    
    onSplitMove : function(split, newSize){
        this.fireEvent('resized', this, newSize);
    },
    
    /** 
     * Returns the SplitBar for this region.
     * @return {Ext.SplitBar}
     */
    getSplitBar : function(){
        return this.split;
    },
    
    hide : function(){
        if(this.split){
            this.split.el.setLocation(-2000,-2000);
            this.split.el.hide();
        }
        Ext.SplitLayoutRegion.superclass.hide.call(this);
    },
    
    show : function(){
        if(this.split){
            this.split.el.show();
        }
        Ext.SplitLayoutRegion.superclass.show.call(this);
    },
    
    beforeSlide: function(){
        if(Ext.isGecko){// firefox overflow auto bug workaround
            this.bodyEl.clip();
            if(this.tabs) this.tabs.bodyEl.clip();
            if(this.activePanel){
                this.activePanel.getEl().clip();
                
                if(this.activePanel.beforeSlide){
                    this.activePanel.beforeSlide();
                }
            }
        }
    },
    
    afterSlide : function(){
        if(Ext.isGecko){// firefox overflow auto bug workaround
            this.bodyEl.unclip();
            if(this.tabs) this.tabs.bodyEl.unclip();
            if(this.activePanel){
                this.activePanel.getEl().unclip();
                if(this.activePanel.afterSlide){
                    this.activePanel.afterSlide();
                }
            }
        }
    },

    initAutoHide : function(){
        if(!this.autoHideHd){
            var st = new Ext.util.DelayedTask(this.slideIn, this);
            this.autoHideHd = {
                'mouseout': function(e){
                    if(!e.within(this.el, true)){
                        st.delay(500);
                    }
                },
                'mouseover' : function(e){
                    st.cancel();
                },
                scope : this
            };
        }
        this.el.on(this.autoHideHd);
    },

    clearAutoHide : function(){
        this.el.un('mouseout', this.autoHideHd.mouseout);
        this.el.un('mouseover', this.autoHideHd.mouseover);
    },

    // these names are backwards but not changed for compat
    slideOut : function(){
        if(this.isSlid){
            return;
        }
        this.isSlid = true;
        this.snapshot = {
            'colbtn': this.collapseBtn.isVisible(),
            'closebtn': this.closeBtn.isVisible()
        };
        this.collapseBtn.hide();
        this.closeBtn.hide();
        this.el.show();
        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getAlignAdj());
        this.beforeSlide();
        this.el.setStyle('z-index', 20000);
        this.el.slideIn(this.getSlideAnchor(), {
            callback: function(){
                this.afterSlide();
                this.initAutoHide();
                Ext.get(document).on('click', this.slideInIf, this);
                this.fireEvent('slideshow', this);
            },
            scope: this,
            block: true
        });
    },

    slideIn : function(callback){
        if(!this.isSlid){
            return;
        }
        this.beforeSlide();
        this.el.slideOut(this.getSlideAnchor(), {
            callback: function(){
                this.isSlid = false;
                this.el.setStyle('z-index', '');
                this.el.setLeftTop(-10000, -10000);
                this.afterSlide();
                this.clearAutoHide();
                Ext.get(document).un('click', this.slideInIf, this);
                this.collapseBtn.setVisible(this.snapshot.colbtn);
                this.closeBtn.setVisible(this.snapshot.closebtn);
                Ext.callback(callback);
                this.fireEvent('slidehide', this);
            },
            scope: this,
            block: true
        });
    },
    
    slideInIf : function(e){
        if(!e.within(this.el)){
            this.slideIn();
        }
    },

    animateCollapse : function(){
        this.beforeSlide();
        this.el.setStyle('z-index', 20000);
        this.el.slideOut(this.getSlideAnchor(), {
            callback : function(){
                this.el.setStyle('z-index', '');
                this.collapsedEl.show({duration:.1});
                this.afterSlide();
                this.el.setLocation(-10000,-10000);
                this.el.hide();
                this.fireEvent('collapsed', this);
            },
            scope: this,
            block: true
        });
    },

    animateExpand : function(){
        this.beforeSlide();
        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
        this.el.setStyle('z-index', 20000);
        this.collapsedEl.hide({
            duration:.1
        });
        this.el.slideIn(this.getSlideAnchor(), {
            callback : function(){
                this.el.setStyle('z-index', '');
                this.afterSlide();
                if(this.split){
                    this.split.el.show();
                }
                this.fireEvent('invalidated', this);
                this.fireEvent('expanded', this);
            },
            scope: this,
            block: true
        });
    },

    anchors : {
        'west' : 'left',
        'east' : 'right',
        'north' : 'top',
        'south' : 'bottom'
    },

    sanchors : {
        'west' : 'l',
        'east' : 'r',
        'north' : 'n',
        'south' : 'b'
    },

    canchors : {
        'west' : 'tl-tr',
        'east' : 'tr-tl',
        'north' : 'tl-bl',
        'south' : 'bl-tl'
    },

    getAnchor : function(){
        return this.anchors[this.position];
    },

    getCollapseAnchor : function(){
        return this.canchors[this.position];
    },

    getSlideAnchor : function(){
        return this.sanchors[this.position];
    },

    getAlignAdj : function(){
        var cm = this.cmargins;
        switch(this.position){
            case 'west':
                return [-cm.right,  -cm.top];
            break;
            case 'east':
                return [cm.left,  -cm.top];
            break;
            case 'north':
                return [-cm.left,  -cm.bottom];
            break;
            case 'south':
                return [-cm.left,  cm.top];
            break;
        }
    },

    getExpandAdj : function(){
        var c = this.collapsedEl, cm = this.cmargins;
        switch(this.position){
            case 'west':
                return [-(cm.right+c.getWidth()+cm.left),  -cm.top];
            break;
            case 'east':
                return [cm.right+c.getWidth()+cm.left,  -cm.top];
            break;
            case 'north':
                return [-cm.right, -(cm.top+cm.bottom+c.getHeight())];
            break;
            case 'south':
                return [-cm.right, cm.top+cm.bottom+c.getHeight()];
            break;
        }
    }
});

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.