← Back to branch summary

~dongpo-deng/sahana-eden/test

« back to all changes in this revision

Viewing changes to static/scripts/ext-2.2.1/source/widgets/layout/AccordionLayout.js

  • Committer: Deng Dongpo
  • Date: 2010-08-01 09:29:44 UTC
  • Revision ID: dongpo@dhcp-21193.iis.sinica.edu.tw-20100801092944-8t9obt4xtl7otesb
initial

Show diffs side-by-side

added added

removed removed

Lines of Context:
static/scripts/ext-2.2.1/source/widgets/layout/AccordionLayout.js
 
1
/*
 
2
 * Ext JS Library 2.2.1
 
3
 * Copyright(c) 2006-2009, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.layout.Accordion
 
11
 * @extends Ext.layout.FitLayout
 
12
 * <p>This is a layout that contains multiple panels in an expandable accordion style such that only one
 
13
 * panel can be open at any given time.  Each panel has built-in support for expanding and collapsing.
 
14
 * This class is intended to be extended or created via the layout:'accordion' {@link Ext.Container#layout}
 
15
 * config, and should generally not need to be created directly via the new keyword.</p>
 
16
 * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
 
17
 * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.
 
18
 * Example usage:</p>
 
19
 * <pre><code>
 
20
var accordion = new Ext.Panel({
 
21
    title: 'Accordion Layout',
 
22
    layout:'accordion',
 
23
    defaults: {
 
24
        // applied to each contained panel
 
25
        bodyStyle: 'padding:15px'
 
26
    },
 
27
    layoutConfig: {
 
28
        // layout-specific configs go here
 
29
        titleCollapse: false,
 
30
        animate: true,
 
31
        activeOnTop: true
 
32
    },
 
33
    items: [{
 
34
        title: 'Panel 1',
 
35
        html: '&lt;p&gt;Panel content!&lt;/p&gt;'
 
36
    },{
 
37
        title: 'Panel 2',
 
38
        html: '&lt;p&gt;Panel content!&lt;/p&gt;'
 
39
    },{
 
40
        title: 'Panel 3',
 
41
        html: '&lt;p&gt;Panel content!&lt;/p&gt;'
 
42
    }]
 
43
});
 
44
</code></pre>
 
45
 */
 
46
Ext.layout.Accordion = Ext.extend(Ext.layout.FitLayout, {
 
47
    /**
 
48
     * @cfg {Boolean} fill
 
49
     * True to adjust the active item's height to fill the available space in the container, false to use the
 
50
     * item's current height, or auto height if not explicitly set (defaults to true).
 
51
     */
 
52
    fill : true,
 
53
    /**
 
54
     * @cfg {Boolean} autoWidth
 
55
     * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
 
56
     * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
 
57
     * layouts if they have auto width, so in such cases this config should be set to false.
 
58
     */
 
59
    autoWidth : true,
 
60
    /**
 
61
     * @cfg {Boolean} titleCollapse
 
62
     * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
 
63
     * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
 
64
     * {@link #hideCollapseTool} should be false also.
 
65
     */
 
66
    titleCollapse : true,
 
67
    /**
 
68
     * @cfg {Boolean} hideCollapseTool
 
69
     * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
 
70
     * When set to true, {@link #titleCollapse} should be true also.
 
71
     */
 
72
    hideCollapseTool : false,
 
73
    /**
 
74
     * @cfg {Boolean} collapseFirst
 
75
     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
 
76
     * in the contained panels' title bars, false to render it last (defaults to false).
 
77
     */
 
78
    collapseFirst : false,
 
79
    /**
 
80
     * @cfg {Boolean} animate
 
81
     * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
 
82
     * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
 
83
     * contained panel for this property, set this to undefined at the layout level.
 
84
     */
 
85
    animate : false,
 
86
    /**
 
87
     * @cfg {Boolean} sequence
 
88
     * <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
 
89
     */
 
90
    sequence : false,
 
91
    /**
 
92
     * @cfg {Boolean} activeOnTop
 
93
     * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
 
94
     * false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
 
95
     */
 
96
    activeOnTop : false,
 
97
 
 
98
    renderItem : function(c){
 
99
        if(this.animate === false){
 
100
            c.animCollapse = false;
 
101
        }
 
102
        c.collapsible = true;
 
103
        if(this.autoWidth){
 
104
            c.autoWidth = true;
 
105
        }
 
106
        if(this.titleCollapse){
 
107
            c.titleCollapse = true;
 
108
        }
 
109
        if(this.hideCollapseTool){
 
110
            c.hideCollapseTool = true;
 
111
        }
 
112
        if(this.collapseFirst !== undefined){
 
113
            c.collapseFirst = this.collapseFirst;
 
114
        }
 
115
        if(!this.activeItem && !c.collapsed){
 
116
            this.activeItem = c;
 
117
        }else if(this.activeItem){
 
118
            c.collapsed = true;
 
119
        }
 
120
        Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
 
121
        c.header.addClass('x-accordion-hd');
 
122
        c.on('beforeexpand', this.beforeExpand, this);
 
123
    },
 
124
 
 
125
    // private
 
126
    beforeExpand : function(p, anim){
 
127
        var ai = this.activeItem;
 
128
        if(ai){
 
129
            if(this.sequence){
 
130
                delete this.activeItem;
 
131
                if (!ai.collapsed){
 
132
                    ai.collapse({callback:function(){
 
133
                        p.expand(anim || true);
 
134
                    }, scope: this});
 
135
                    return false;
 
136
                }
 
137
            }else{
 
138
                ai.collapse(this.animate);
 
139
            }
 
140
        }
 
141
        this.activeItem = p;
 
142
        if(this.activeOnTop){
 
143
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
 
144
        }
 
145
        this.layout();
 
146
    },
 
147
 
 
148
    // private
 
149
    setItemSize : function(item, size){
 
150
        if(this.fill && item){
 
151
            var items = this.container.items.items;
 
152
            var hh = 0;
 
153
            for(var i = 0, len = items.length; i < len; i++){
 
154
                var p = items[i];
 
155
                if(p != item){
 
156
                    hh += (p.getSize().height - p.bwrap.getHeight());
 
157
                }
 
158
            }
 
159
            size.height -= hh;
 
160
            item.setSize(size);
 
161
        }
 
162
    }
 
163
});
 
164
Ext.Container.LAYOUTS['accordion'] = Ext.layout.Accordion;
 
 
b'\\ No newline at end of file'