source: trunk/web/addons/job_monarch/lib/extjs/source/widgets/CycleButton.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 6.3 KB
Line 
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.CycleButton
11 * @extends Ext.SplitButton
12 * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
13 * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
14 * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
15 * button displays the dropdown menu just like a normal SplitButton.  Example usage:
16 * <pre><code>
17var btn = new Ext.CycleButton({
18    showText: true,
19    prependText: 'View as ',
20    items: [{
21        text:'text only',
22        iconCls:'view-text',
23        checked:true
24    },{
25        text:'HTML',
26        iconCls:'view-html'
27    }],
28    changeHandler:function(btn, item){
29        Ext.Msg.alert('Change View', item.text);
30    }
31});
32</code></pre>
33 * @constructor
34 * Create a new split button
35 * @param {Object} config The config object
36 */
37Ext.CycleButton = Ext.extend(Ext.SplitButton, {
38    /**
39     * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
40     * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
41     */
42    /**
43     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
44     */
45    /**
46     * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
47     * button's text (only applies when showText = true, defaults to '')
48     */
49    /**
50     * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
51     * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
52     * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
53     * following argument list: (SplitButton this, Ext.menu.CheckItem item)
54     */
55        /**
56         * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
57         * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the
58         * default behavior of changing the button's icon to match the selected item's icon on change.
59         */
60
61    // private
62    getItemText : function(item){
63        if(item && this.showText === true){
64            var text = '';
65            if(this.prependText){
66                text += this.prependText;
67            }
68            text += item.text;
69            return text;
70        }
71        return undefined;
72    },
73
74    /**
75     * Sets the button's active menu item.
76     * @param {Ext.menu.CheckItem} item The item to activate
77     * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
78     */
79    setActiveItem : function(item, suppressEvent){
80        if(typeof item != 'object'){
81            item = this.menu.items.get(item);
82        }
83        if(item){
84            if(!this.rendered){
85                this.text = this.getItemText(item);
86                this.iconCls = item.iconCls;
87            }else{
88                var t = this.getItemText(item);
89                if(t){
90                    this.setText(t);
91                }
92                this.setIconClass(item.iconCls);
93            }
94            this.activeItem = item;
95            if(!item.checked){
96                item.setChecked(true, true);
97            }
98            if(this.forceIcon){
99                this.setIconClass(this.forceIcon);
100            }
101            if(!suppressEvent){
102                this.fireEvent('change', this, item);
103            }
104        }
105    },
106
107    /**
108     * Gets the currently active menu item.
109     * @return {Ext.menu.CheckItem} The active item
110     */
111    getActiveItem : function(){
112        return this.activeItem;
113    },
114
115    // private
116    initComponent : function(){
117        this.addEvents(
118            /**
119             * @event change
120             * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
121             * is set on this CycleButton, it will be called instead on active item change and this change event will
122             * not be fired.
123             * @param {Ext.CycleButton} this
124             * @param {Ext.menu.CheckItem} item The menu item that was selected
125             */
126            "change"
127        );
128
129        if(this.changeHandler){
130            this.on('change', this.changeHandler, this.scope||this);
131            delete this.changeHandler;
132        }
133
134        this.itemCount = this.items.length;
135
136        this.menu = {cls:'x-cycle-menu', items:[]};
137        var checked;
138        for(var i = 0, len = this.itemCount; i < len; i++){
139            var item = this.items[i];
140            item.group = item.group || this.id;
141            item.itemIndex = i;
142            item.checkHandler = this.checkHandler;
143            item.scope = this;
144            item.checked = item.checked || false;
145            this.menu.items.push(item);
146            if(item.checked){
147                checked = item;
148            }
149        }
150        this.setActiveItem(checked, true);
151        Ext.CycleButton.superclass.initComponent.call(this);
152
153        this.on('click', this.toggleSelected, this);
154    },
155
156    // private
157    checkHandler : function(item, pressed){
158        if(pressed){
159            this.setActiveItem(item);
160        }
161    },
162
163    /**
164     * This is normally called internally on button click, but can be called externally to advance the button's
165     * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
166     * the active item will be set to the first item in the menu.
167     */
168    toggleSelected : function(){
169        this.menu.render();
170               
171                var nextIdx, checkItem;
172                for (var i = 1; i < this.itemCount; i++) {
173                        nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
174                        // check the potential item
175                        checkItem = this.menu.items.itemAt(nextIdx);
176                        // if its not disabled then check it.
177                        if (!checkItem.disabled) {
178                                checkItem.setChecked(true);
179                                break;
180                        }
181                }
182    }
183});
184Ext.reg('cycle', Ext.CycleButton);
Note: See TracBrowser for help on using the repository browser.