source: trunk/web/addons/job_monarch/lib/extjs-30/src/widgets/CycleButton.js @ 625

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

lib/extjs-30:

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