3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.CycleButton
\r
9 * @extends Ext.SplitButton
\r
10 * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically
\r
11 * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
\r
12 * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
\r
13 * button displays the dropdown menu just like a normal SplitButton. Example usage:
\r
15 var btn = new Ext.CycleButton({
\r
17 prependText: 'View as ',
\r
20 iconCls:'view-text',
\r
26 changeHandler:function(btn, item){
\r
27 Ext.Msg.alert('Change View', item.text);
\r
32 * Create a new split button
\r
33 * @param {Object} config The config object
\r
36 Ext.CycleButton = Ext.extend(Ext.SplitButton, {
\r
38 * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
\r
39 * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
\r
42 * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
\r
45 * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
\r
46 * button's text (only applies when showText = true, defaults to '')
\r
49 * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
\r
50 * item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead
\r
51 * fire the {@link #change} event on active item change. The changeHandler function will be called with the
\r
52 * following argument list: (SplitButton this, Ext.menu.CheckItem item)
\r
55 * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button. This
\r
56 * icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the
\r
57 * default behavior of changing the button's icon to match the selected item's icon on change.
\r
62 * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
\r
66 getItemText : function(item){
\r
67 if(item && this.showText === true){
\r
69 if(this.prependText){
\r
70 text += this.prependText;
\r
79 * Sets the button's active menu item.
\r
80 * @param {Ext.menu.CheckItem} item The item to activate
\r
81 * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
\r
83 setActiveItem : function(item, suppressEvent){
\r
84 if(!Ext.isObject(item)){
\r
85 item = this.menu.getComponent(item);
\r
89 this.text = this.getItemText(item);
\r
90 this.iconCls = item.iconCls;
\r
92 var t = this.getItemText(item);
\r
96 this.setIconClass(item.iconCls);
\r
98 this.activeItem = item;
\r
100 item.setChecked(true, true);
\r
102 if(this.forceIcon){
\r
103 this.setIconClass(this.forceIcon);
\r
105 if(!suppressEvent){
\r
106 this.fireEvent('change', this, item);
\r
112 * Gets the currently active menu item.
\r
113 * @return {Ext.menu.CheckItem} The active item
\r
115 getActiveItem : function(){
\r
116 return this.activeItem;
\r
120 initComponent : function(){
\r
124 * Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function
\r
125 * is set on this CycleButton, it will be called instead on active item change and this change event will
\r
127 * @param {Ext.CycleButton} this
\r
128 * @param {Ext.menu.CheckItem} item The menu item that was selected
\r
133 if(this.changeHandler){
\r
134 this.on('change', this.changeHandler, this.scope||this);
\r
135 delete this.changeHandler;
\r
138 this.itemCount = this.items.length;
\r
140 this.menu = {cls:'x-cycle-menu', items:[]};
\r
142 Ext.each(this.items, function(item, i){
\r
144 group: item.group || this.id,
\r
146 checkHandler: this.checkHandler,
\r
148 checked: item.checked || false
\r
150 this.menu.items.push(item);
\r
155 this.setActiveItem(checked, true);
\r
156 Ext.CycleButton.superclass.initComponent.call(this);
\r
158 this.on('click', this.toggleSelected, this);
\r
162 checkHandler : function(item, pressed){
\r
164 this.setActiveItem(item);
\r
169 * This is normally called internally on button click, but can be called externally to advance the button's
\r
170 * active item programmatically to the next one in the menu. If the current item is the last one in the menu
\r
171 * the active item will be set to the first item in the menu.
\r
173 toggleSelected : function(){
\r
176 // layout if we haven't before so the items are active
\r
181 var nextIdx, checkItem;
\r
182 for (var i = 1; i < this.itemCount; i++) {
\r
183 nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
\r
184 // check the potential item
\r
185 checkItem = m.items.itemAt(nextIdx);
\r
186 // if its not disabled then check it.
\r
187 if (!checkItem.disabled) {
\r
188 checkItem.setChecked(true);
\r
194 Ext.reg('cycle', Ext.CycleButton);