ExtJs_Ext.layout.Accordion闲谈

/*!
 * Ext JS Library 3.3.0
 */


/**
 * @class Ext.layout.AccordionLayout
 * @extends Ext.layout.FitLayout
 * 
 * This is a layout that manages multiple Panels in an expandable(可张开的) accordion style such that only
 * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
 * 
 * Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
 * 
 * This class is intended(为..打算的) to be extended or created via the {Ext.Container#layout layout}
 * configuration property.  See {Ext.Container#layout} for additional details.
 * Example usage:
var accordion = new Ext.Panel({
   title: 'Accordion Layout',
   layout:'accordion',
   defaults: {
       // applied to each contained panel
       bodyStyle: 'padding:15px'
   },
   layoutConfig: {
       // layout-specific configs go here
       titleCollapse: false,// 只有点击工具按钮才能折叠；
       animate: true,
       activeOnTop: true// 被激活的项总在顶端；
   },
   items: [{
       title: 'Panel 1',
       html: '<p>Panel content!</p>'
   },{
       title: 'Panel 2',
       html: '<p>Panel content!</p>'
   },{
       title: 'Panel 3',
       html: '<p>Panel content!</p>'
   }]
});
 */


Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
/**
     * @cfg {Boolean} fill 填满
     * True to adjust(调整) the active item's height to fill(占满) the available(可用的) space in the container;
     * false to use the item's current height, or auto height if not explicitly(明确地) set (defaults to true).
     */
    fill : true,
    
/**
     * @cfg {Boolean} autoWidth
     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
     * Note that some components, in particular(特定的情况下) the {Ext.grid.GridPanel grid}, will not function properly within
     * layouts if they have auto width, so in such cases this config should be set to false.
     */
    autoWidth : true,
    
/**
     * @cfg {Boolean} titleCollapse
     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
     * {#hideCollapseTool} should be false also.
     */
    titleCollapse : true,
    
/**
     * @cfg {Boolean} hideCollapseTool // 隐藏折叠按钮嘛？
     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
     * When set to true, {#titleCollapse} should be true also.
     */
    hideCollapseTool : false,
    
/**
     * @cfg {Boolean} collapseFirst 隐藏折叠按钮要不要在第一位置？
     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
     * in the contained panels' title bars, false to render it last (defaults to false).
     */
    collapseFirst : false,
    
/**
     * @cfg {Boolean} animate 动画效果
     * True to slide(滑动) the contained panels open and closed during expand/collapse using animation(动画);
     * false to open and close directly with no animation (defaults to false).  
     * Note: to defer(延时) to the specific(明确地) config setting of each
     * contained panel for this property, set this to undefined at the layout level.
     */
    animate : false,
    
/**
     * @cfg {Boolean} sequence 连续；
     * Experimental(实验性的). If animate is set to true, this will result(导致) in each animation running in sequence.
     */
    sequence : false,
    
/**
     * @cfg {Boolean} activeOnTop
     * True to swap(交换) the position of each panel as it is expanded so that it becomes the first item in the container,
     * false to keep the panels in the rendered order. This is NOT compatible(并存的) with "animate:true" (defaults to false).
     */
    activeOnTop : false,


    type: 'accordion',


    renderItem : function(c){
        if(this.animate === false){
            c.animCollapse = false;
        }
        c.collapsible = true;
        if(this.autoWidth){
            c.autoWidth = true;
        }
        if(this.titleCollapse){
            c.titleCollapse = true;
        }
        if(this.hideCollapseTool){
            c.hideCollapseTool = true;
        }
        if(this.collapseFirst !== undefined){
            c.collapseFirst = this.collapseFirst;
        }
        if(!this.activeItem && !c.collapsed){
            this.setActiveItem(c, true);
        }else if(this.activeItem && this.activeItem != c){
            c.collapsed = true;
        }
        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
        c.header.addClass('x-accordion-hd');
        c.on('beforeexpand', this.beforeExpand, this);
    },


    onRemove: function(c){
        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
        if(c.rendered){
            c.header.removeClass('x-accordion-hd');
        }
        c.un('beforeexpand', this.beforeExpand, this);
    },


    // private
    beforeExpand : function(p, anim){
        var ai = this.activeItem;
        if(ai){
            if(this.sequence){
                delete this.activeItem;
                if (!ai.collapsed){
                    ai.collapse({callback:function(){
                        p.expand(anim || true);
                    }, scope: this});
                    return false;
                }
            }else{
                ai.collapse(this.animate);
            }
        }
        this.setActive(p);
        if(this.activeOnTop){
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
        }
        // Items have been hidden an possibly rearranged, we need to get the container size again.
        this.layout();
    },


    // private
    setItemSize : function(item, size){
        if(this.fill && item){
            var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
            // Add up all the header heights
            for (i = 0; i < len; i++) {
                if((p = ct[i]) != item && !p.hidden){
                    hh += p.header.getHeight();
                }
            };
            // Subtract(减) the header heights from the container size
            size.height -= hh;
            // Call setSize on the container to set the correct height.  For Panels, deferedHeight
            // will simply store this size for when the expansion is done.
            item.setSize(size);
        }
    },


    
/**
     * Sets the active (expanded) item in the layout.
     * @param {String/Number} item The string component id or numeric index of the item to activate(触发);
     */
    setActiveItem : function(item){
        this.setActive(item, true);
    },


    // private
    setActive : function(item, expand){
        var ai = this.activeItem;
        item = this.container.getComponent(item);
        if(ai != item){
            if(item.rendered && item.collapsed && expand){
                item.expand();
            }else{
                if(ai){
                   ai.fireEvent('deactivate', ai);
                }
                this.activeItem = item;
                item.fireEvent('activate', item);
            }
        }
    }
});
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;


//backwards compat
Ext.layout.Accordion = Ext.layout.AccordionLayout;