/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
* <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>
* <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
* </ul></div>
- * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the handler is executed. Defaults to this Button.
* @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
* See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>.
* @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
* @type Boolean
*/
pressed : false,
- /**
- * The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when
- * the Button is added to a container). Read-only.
- * @type Ext.Panel
- * @property ownerCt
- */
/**
* @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
* @cfg {Boolean} enableToggle
* True to enable pressed/not pressed toggling (defaults to false)
*/
- enableToggle: false,
+ enableToggle : false,
/**
* @cfg {Function} toggleHandler
* Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">
* <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li>
- * <li><b>state</b> : Boolean<div class="sub-desc">The next state if the Button, true means pressed.</div></li>
+ * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li>
* </ul>
*/
/**
type : 'button',
// private
- menuClassTarget: 'tr:nth(2)',
+ menuClassTarget : 'tr:nth(2)',
/**
* @cfg {String} clickEvent
- * The type of event to map to the button's event handler (defaults to 'click')
+ * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
+ * Defaults to <tt>'click'</tt>.
*/
clickEvent : 'click',
* DOM structure created.</p>
* <p>When a custom {@link #template} is used, you must ensure that this selector results in the selection of
* a focussable element.</p>
- * <p>Defaults to <b><tt>"button:first-child"</tt></b>.</p>
+ * <p>Defaults to <b><tt>'button:first-child'</tt></b>.</p>
*/
buttonSelector : 'button:first-child',
* </ul>
* <p>Defaults to <b><tt>'small'</tt></b>.</p>
*/
- scale: 'small',
+ scale : 'small',
+
+ /**
+ * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the
+ * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is
+ * executed. Defaults to this Button.
+ */
/**
* @cfg {String} iconAlign
* @type Menu
* The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
*/
+ /**
+ * @cfg {Boolean} autoWidth
+ * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content.
+ * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent
+ * the button from doing this automatic sizing.
+ * Defaults to <tt>undefined</tt>.
+ */
initComponent : function(){
Ext.Button.superclass.initComponent.call(this);
},
/**
- * <p>This method returns an object which provides substitution parameters for the {@link #template Template} used
+ * <p>This method returns an Array which provides substitution parameters for the {@link #template Template} used
* to create this Button's DOM structure.</p>
* <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
* own implementation of this method.</p>
* <p>The default implementation which provides data for the default {@link #template} returns an Array containing the
* following items:</p><div class="mdetail-params"><ul>
- * <li>The Button's {@link #text}</li>
* <li>The <button>'s {@link #type}</li>
- * <li>The {@link iconCls} applied to the <button> {@link #btnEl element}</li>
- * <li>The {@link #cls} applied to the Button's main {@link #getEl Element}</li>
- * <li>A CSS class name controlling the Button's {@link #scale} and {@link #iconAlign icon alignment}</li>
- * <li>A CSS class name which applies an arrow to the Button if configured with a {@link #menu}</li>
+ * <li>A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.</li>
+ * <li>A CSS class to determine the presence and position of an arrow icon. (<code>'x-btn-arrow'</code> or <code>'x-btn-arrow-bottom'</code> or <code>''</code>)</li>
+ * <li>The {@link #cls} CSS class name applied to the button's wrapping <table> element.</li>
+ * <li>The Component id which is applied to the button's wrapping <table> element.</li>
* </ul></div>
- * @return {Object} Substitution data for a Template.
+ * @return {Array} Substitution data for a Template.
*/
getTemplateArgs : function(){
- var cls = (this.cls || '');
- cls += (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
- if(this.pressed){
- cls += ' x-btn-pressed';
+ return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
+ },
+
+ // private
+ setButtonClass : function(){
+ if(this.useSetClass){
+ if(!Ext.isEmpty(this.oldCls)){
+ this.el.removeClass([this.oldCls, 'x-btn-pressed']);
+ }
+ this.oldCls = (this.iconCls || this.icon) ? (this.text ? 'x-btn-text-icon' : 'x-btn-icon') : 'x-btn-noicon';
+ this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);
}
- return [this.text || ' ', this.type, this.iconCls || '', cls, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass()];
},
// protected
if(!Ext.Button.buttonTemplate){
// hideous table template
Ext.Button.buttonTemplate = new Ext.Template(
- '<table cellspacing="0" class="x-btn {3}"><tbody class="{4}">',
+ '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>',
- '<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{5}" unselectable="on"><button class="x-btn-text {2}" type="{1}">{0}</button></em></td><td class="x-btn-mr"><i> </i></td></tr>',
+ '<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i> </i></td></tr>',
'<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>',
- "</tbody></table>");
+ '</tbody></table>');
Ext.Button.buttonTemplate.compile();
}
this.template = Ext.Button.buttonTemplate;
// private
initButtonEl : function(btn, btnEl){
this.el = btn;
-
- if(this.id){
- this.el.dom.id = this.el.id = this.id;
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
- }
- if(this.tabIndex !== undefined){
+ this.setIcon(this.icon);
+ this.setText(this.text);
+ this.setIconClass(this.iconCls);
+ if(Ext.isDefined(this.tabIndex)){
btnEl.dom.tabIndex = this.tabIndex;
}
if(this.tooltip){
mouseover: this.onMouseOver,
mousedown: this.onMouseDown
});
-
+
// new functionality for monitoring on the document level
//this.mon(btn, 'mouseout', this.onMouseOut, this);
}
if(this.repeat){
var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
- this.mon(repeater, 'click', this.onClick, this);
+ this.mon(repeater, 'click', this.onRepeatClick, this);
+ }else{
+ this.mon(btn, this.clickEvent, this.onClick, this);
}
-
- this.mon(btn, this.clickEvent, this.onClick, this);
},
// private
afterRender : function(){
Ext.Button.superclass.afterRender.call(this);
+ this.useSetClass = true;
+ this.setButtonClass();
+ this.doc = Ext.getDoc();
this.doAutoWidth();
},
* @return {Ext.Button} this
*/
setIconClass : function(cls){
+ this.iconCls = cls;
if(this.el){
- this.btnEl.replaceClass(this.iconCls, cls);
+ this.btnEl.dom.className = '';
+ this.btnEl.addClass(['x-btn-text', cls || '']);
+ this.setButtonClass();
}
- this.iconCls = cls;
return this;
},
}
return this;
},
-
+
// private
- clearTip: function(){
+ clearTip : function(){
if(Ext.isObject(this.tooltip)){
Ext.QuickTips.unregister(this.btnEl);
}
},
-
+
// private
- beforeDestroy: function(){
+ beforeDestroy : function(){
if(this.rendered){
this.clearTip();
}
- Ext.destroy(this.menu, this.repeater);
+ if(this.menu && this.destroyMenu !== false) {
+ Ext.destroy(this.btnEl, this.menu);
+ }
+ Ext.destroy(this.repeater);
},
// private
onDestroy : function(){
- var doc = Ext.getDoc();
- doc.un('mouseover', this.monitorMouseOver, this);
- doc.un('mouseup', this.onMouseUp, this);
if(this.rendered){
+ this.doc.un('mouseover', this.monitorMouseOver, this);
+ this.doc.un('mouseup', this.onMouseUp, this);
+ delete this.doc;
+ delete this.btnEl;
Ext.ButtonToggleMgr.unregister(this);
}
+ Ext.Button.superclass.onDestroy.call(this);
},
// private
doAutoWidth : function(){
- if(this.el && this.text && this.width === undefined){
+ if(this.autoWidth !== false && this.el && this.text && this.width === undefined){
this.el.setWidth('auto');
if(Ext.isIE7 && Ext.isStrict){
var ib = this.btnEl;
/**
* Assigns this Button's click handler
* @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed in
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
+ * Defaults to this Button.
* @return {Ext.Button} this
*/
setHandler : function(handler, scope){
setText : function(text){
this.text = text;
if(this.el){
- this.el.child('td.x-btn-mc ' + this.buttonSelector).update(text);
+ this.btnEl.update(text || ' ');
+ this.setButtonClass();
}
this.doAutoWidth();
return this;
},
+ /**
+ * Sets the background image (inline style) of the button. This method also changes
+ * the value of the {@link icon} config internally.
+ * @param {String} icon The path to an image to display in the button
+ * @return {Ext.Button} this
+ */
+ setIcon : function(icon){
+ this.icon = icon;
+ if(this.el){
+ this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
+ this.setButtonClass();
+ }
+ return this;
+ },
+
/**
* Gets the text for this Button
* @return {String} The button text
toggle : function(state, suppressEvent){
state = state === undefined ? !this.pressed : !!state;
if(state != this.pressed){
- this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+ if(this.rendered){
+ this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+ }
this.pressed = state;
if(!suppressEvent){
this.fireEvent('toggle', this, state);
return this;
},
- /**
- * Focus the button
- */
- focus : function(){
- this.btnEl.focus();
- },
-
// private
onDisable : function(){
this.onDisableChange(true);
onEnable : function(){
this.onDisableChange(false);
},
-
+
onDisableChange : function(disabled){
if(this.el){
if(!Ext.isIE6 || !this.text){
if(this.tooltip){
Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
}
+ if(this.menu.isVisible()){
+ this.menu.hide();
+ }
+ this.menu.ownerCt = this;
this.menu.show(this.el, this.menuAlign);
}
return this;
* Hide this button's menu (if it has one)
*/
hideMenu : function(){
- if(this.menu){
+ if(this.hasVisibleMenu()){
this.menu.hide();
}
return this;
* @return {Boolean}
*/
hasVisibleMenu : function(){
- return this.menu && this.menu.isVisible();
+ return this.menu && this.menu.ownerCt == this && this.menu.isVisible();
+ },
+
+ // private
+ onRepeatClick : function(repeat, e){
+ this.onClick(e);
},
// private
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
- if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
+ if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent('click', this, e);
if(!internal){
this.el.addClass('x-btn-over');
if(!this.monitoringMouseOver){
- Ext.getDoc().on('mouseover', this.monitorMouseOver, this);
+ this.doc.on('mouseover', this.monitorMouseOver, this);
this.monitoringMouseOver = true;
}
this.fireEvent('mouseover', this, e);
monitorMouseOver : function(e){
if(e.target != this.el.dom && !e.within(this.el)){
if(this.monitoringMouseOver){
- Ext.getDoc().un('mouseover', this.monitorMouseOver, this);
+ this.doc.un('mouseover', this.monitorMouseOver, this);
this.monitoringMouseOver = false;
}
this.onMouseOut(e);
this.fireEvent('menutriggerout', this, this.menu, e);
}
},
+
+ focus : function() {
+ this.btnEl.focus();
+ },
+
+ blur : function() {
+ this.btnEl.blur();
+ },
+
// private
onFocus : function(e){
if(!this.disabled){
onMouseDown : function(e){
if(!this.disabled && e.button === 0){
this.getClickEl(e).addClass('x-btn-click');
- Ext.getDoc().on('mouseup', this.onMouseUp, this);
+ this.doc.on('mouseup', this.onMouseUp, this);
}
},
// private
onMouseUp : function(e){
if(e.button === 0){
this.getClickEl(e, true).removeClass('x-btn-click');
- Ext.getDoc().un('mouseup', this.onMouseUp, this);
+ this.doc.un('mouseup', this.onMouseUp, this);
}
},
// private
onMenuShow : function(e){
- this.ignoreNextClick = 0;
- this.el.addClass('x-btn-menu-active');
- this.fireEvent('menushow', this, this.menu);
+ if(this.menu.ownerCt == this){
+ this.menu.ownerCt = this;
+ this.ignoreNextClick = 0;
+ this.el.addClass('x-btn-menu-active');
+ this.fireEvent('menushow', this, this.menu);
+ }
},
// private
onMenuHide : function(e){
- this.el.removeClass('x-btn-menu-active');
- this.ignoreNextClick = this.restoreClick.defer(250, this);
- this.fireEvent('menuhide', this, this.menu);
+ if(this.menu.ownerCt == this){
+ this.el.removeClass('x-btn-menu-active');
+ this.ignoreNextClick = this.restoreClick.defer(250, this);
+ this.fireEvent('menuhide', this, this.menu);
+ delete this.menu.ownerCt;
+ }
},
// private
this.ignoreNextClick = 0;
}
-
-
/**
* @cfg {String} autoEl @hide
*/
+ /**
+ * @cfg {String/Object} html @hide
+ */
+ /**
+ * @cfg {String} contentEl @hide
+ */
+ /**
+ * @cfg {Mixed} data @hide
+ */
+ /**
+ * @cfg {Mixed} tpl @hide
+ */
+ /**
+ * @cfg {String} tplWriteMode @hide
+ */
});
Ext.reg('button', Ext.Button);
return null;
}
};
-}();/**\r
- * @class Ext.SplitButton\r
- * @extends Ext.Button\r
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default\r
- * click event of the button. Typically this would be used to display a dropdown menu that provides additional\r
- * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:\r
- * <pre><code>\r
-// display a dropdown menu:\r
-new Ext.SplitButton({\r
- renderTo: 'button-ct', // the container id\r
- text: 'Options',\r
- handler: optionsHandler, // handle a click on the button itself\r
- menu: new Ext.menu.Menu({\r
- items: [\r
- // these items will render as dropdown menu items when the arrow is clicked:\r
- {text: 'Item 1', handler: item1Handler},\r
- {text: 'Item 2', handler: item2Handler}\r
- ]\r
- })\r
-});\r
-\r
-// Instead of showing a menu, you provide any type of custom\r
-// functionality you want when the dropdown arrow is clicked:\r
-new Ext.SplitButton({\r
- renderTo: 'button-ct',\r
- text: 'Options',\r
- handler: optionsHandler,\r
- arrowHandler: myCustomHandler\r
-});\r
-</code></pre>\r
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)\r
- * @cfg {String} arrowTooltip The title attribute of the arrow\r
- * @constructor\r
- * Create a new menu button\r
- * @param {Object} config The config object\r
- * @xtype splitbutton\r
- */\r
-Ext.SplitButton = Ext.extend(Ext.Button, {\r
- // private\r
- arrowSelector : 'em',\r
- split: true,\r
-\r
- // private\r
- initComponent : function(){\r
- Ext.SplitButton.superclass.initComponent.call(this);\r
- /**\r
- * @event arrowclick\r
- * Fires when this button's arrow is clicked\r
- * @param {MenuButton} this\r
- * @param {EventObject} e The click event\r
- */\r
- this.addEvents("arrowclick");\r
- },\r
-\r
- // private\r
- onRender : function(){\r
- Ext.SplitButton.superclass.onRender.apply(this, arguments);\r
- if(this.arrowTooltip){\r
- this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;\r
- }\r
- },\r
-\r
- /**\r
- * Sets this button's arrow click handler.\r
- * @param {Function} handler The function to call when the arrow is clicked\r
- * @param {Object} scope (optional) Scope for the function passed above\r
- */\r
- setArrowHandler : function(handler, scope){\r
- this.arrowHandler = handler;\r
- this.scope = scope;\r
- },\r
-\r
- getMenuClass : function(){\r
- return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');\r
- },\r
-\r
- isClickOnArrow : function(e){\r
- return this.arrowAlign != 'bottom' ?\r
- e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :\r
- e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom;\r
- },\r
-\r
- // private\r
- onClick : function(e, t){\r
- e.preventDefault();\r
- if(!this.disabled){\r
- if(this.isClickOnArrow(e)){\r
- if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){\r
- this.showMenu();\r
- }\r
- this.fireEvent("arrowclick", this, e);\r
- if(this.arrowHandler){\r
- this.arrowHandler.call(this.scope || this, this, e);\r
- }\r
- }else{\r
- if(this.enableToggle){\r
- this.toggle();\r
- }\r
- this.fireEvent("click", this, e);\r
- if(this.handler){\r
- this.handler.call(this.scope || this, this, e);\r
- }\r
- }\r
- }\r
- },\r
-\r
- // private\r
- isMenuTriggerOver : function(e){\r
- return this.menu && e.target.tagName == 'em';\r
- },\r
-\r
- // private\r
- isMenuTriggerOut : function(e, internal){\r
- return this.menu && e.target.tagName != 'em';\r
- }\r
-});\r
-\r
-Ext.reg('splitbutton', Ext.SplitButton);/**\r
- * @class Ext.CycleButton\r
- * @extends Ext.SplitButton\r
- * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically\r
- * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's\r
- * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the\r
- * button displays the dropdown menu just like a normal SplitButton. Example usage:\r
- * <pre><code>\r
-var btn = new Ext.CycleButton({\r
- showText: true,\r
- prependText: 'View as ',\r
- items: [{\r
- text:'text only',\r
- iconCls:'view-text',\r
- checked:true\r
- },{\r
- text:'HTML',\r
- iconCls:'view-html'\r
- }],\r
- changeHandler:function(btn, item){\r
- Ext.Msg.alert('Change View', item.text);\r
- }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new split button\r
- * @param {Object} config The config object\r
- * @xtype cycle\r
- */\r
-Ext.CycleButton = Ext.extend(Ext.SplitButton, {\r
- /**\r
- * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the\r
- * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})\r
- */\r
- /**\r
- * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)\r
- */\r
- /**\r
- * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the\r
- * button's text (only applies when showText = true, defaults to '')\r
- */\r
- /**\r
- * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu\r
- * item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead\r
- * fire the {@link #change} event on active item change. The changeHandler function will be called with the\r
- * following argument list: (SplitButton this, Ext.menu.CheckItem item)\r
- */\r
- /**\r
- * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button. This\r
- * icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the \r
- * default behavior of changing the button's icon to match the selected item's icon on change.\r
- */\r
- /**\r
- * @property menu\r
- * @type Menu\r
- * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.\r
- */\r
-\r
- // private\r
- getItemText : function(item){\r
- if(item && this.showText === true){\r
- var text = '';\r
- if(this.prependText){\r
- text += this.prependText;\r
- }\r
- text += item.text;\r
- return text;\r
- }\r
- return undefined;\r
- },\r
-\r
- /**\r
- * Sets the button's active menu item.\r
- * @param {Ext.menu.CheckItem} item The item to activate\r
- * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)\r
- */\r
- setActiveItem : function(item, suppressEvent){\r
- if(typeof item != 'object'){\r
- item = this.menu.items.get(item);\r
- }\r
- if(item){\r
- if(!this.rendered){\r
- this.text = this.getItemText(item);\r
- this.iconCls = item.iconCls;\r
- }else{\r
- var t = this.getItemText(item);\r
- if(t){\r
- this.setText(t);\r
- }\r
- this.setIconClass(item.iconCls);\r
- }\r
- this.activeItem = item;\r
- if(!item.checked){\r
- item.setChecked(true, true);\r
- }\r
- if(this.forceIcon){\r
- this.setIconClass(this.forceIcon);\r
- }\r
- if(!suppressEvent){\r
- this.fireEvent('change', this, item);\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Gets the currently active menu item.\r
- * @return {Ext.menu.CheckItem} The active item\r
- */\r
- getActiveItem : function(){\r
- return this.activeItem;\r
- },\r
-\r
- // private\r
- initComponent : function(){\r
- this.addEvents(\r
- /**\r
- * @event change\r
- * Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function\r
- * is set on this CycleButton, it will be called instead on active item change and this change event will\r
- * not be fired.\r
- * @param {Ext.CycleButton} this\r
- * @param {Ext.menu.CheckItem} item The menu item that was selected\r
- */\r
- "change"\r
- );\r
-\r
- if(this.changeHandler){\r
- this.on('change', this.changeHandler, this.scope||this);\r
- delete this.changeHandler;\r
- }\r
-\r
- this.itemCount = this.items.length;\r
-\r
- this.menu = {cls:'x-cycle-menu', items:[]};\r
- var checked;\r
- for(var i = 0, len = this.itemCount; i < len; i++){\r
- var item = this.items[i];\r
- item.group = item.group || this.id;\r
- item.itemIndex = i;\r
- item.checkHandler = this.checkHandler;\r
- item.scope = this;\r
- item.checked = item.checked || false;\r
- this.menu.items.push(item);\r
- if(item.checked){\r
- checked = item;\r
- }\r
- }\r
- this.setActiveItem(checked, true);\r
- Ext.CycleButton.superclass.initComponent.call(this);\r
-\r
- this.on('click', this.toggleSelected, this);\r
- },\r
-\r
- // private\r
- checkHandler : function(item, pressed){\r
- if(pressed){\r
- this.setActiveItem(item);\r
- }\r
- },\r
-\r
- /**\r
- * This is normally called internally on button click, but can be called externally to advance the button's\r
- * active item programmatically to the next one in the menu. If the current item is the last one in the menu\r
- * the active item will be set to the first item in the menu.\r
- */\r
- toggleSelected : function(){\r
- this.menu.render();\r
- \r
- var nextIdx, checkItem;\r
- for (var i = 1; i < this.itemCount; i++) {\r
- nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;\r
- // check the potential item\r
- checkItem = this.menu.items.itemAt(nextIdx);\r
- // if its not disabled then check it.\r
- if (!checkItem.disabled) {\r
- checkItem.setChecked(true);\r
- break;\r
- }\r
- }\r
- }\r
-});\r
+}();
+/**
+ * @class Ext.SplitButton
+ * @extends Ext.Button
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
+ * click event of the button. Typically this would be used to display a dropdown menu that provides additional
+ * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
+ * <pre><code>
+// display a dropdown menu:
+new Ext.SplitButton({
+ renderTo: 'button-ct', // the container id
+ text: 'Options',
+ handler: optionsHandler, // handle a click on the button itself
+ menu: new Ext.menu.Menu({
+ items: [
+ // these items will render as dropdown menu items when the arrow is clicked:
+ {text: 'Item 1', handler: item1Handler},
+ {text: 'Item 2', handler: item2Handler}
+ ]
+ })
+});
+
+// Instead of showing a menu, you provide any type of custom
+// functionality you want when the dropdown arrow is clicked:
+new Ext.SplitButton({
+ renderTo: 'button-ct',
+ text: 'Options',
+ handler: optionsHandler,
+ arrowHandler: myCustomHandler
+});
+</code></pre>
+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
+ * @cfg {String} arrowTooltip The title attribute of the arrow
+ * @constructor
+ * Create a new menu button
+ * @param {Object} config The config object
+ * @xtype splitbutton
+ */
+Ext.SplitButton = Ext.extend(Ext.Button, {
+ // private
+ arrowSelector : 'em',
+ split: true,
+
+ // private
+ initComponent : function(){
+ Ext.SplitButton.superclass.initComponent.call(this);
+ /**
+ * @event arrowclick
+ * Fires when this button's arrow is clicked
+ * @param {MenuButton} this
+ * @param {EventObject} e The click event
+ */
+ this.addEvents("arrowclick");
+ },
+
+ // private
+ onRender : function(){
+ Ext.SplitButton.superclass.onRender.apply(this, arguments);
+ if(this.arrowTooltip){
+ this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
+ }
+ },
+
+ /**
+ * Sets this button's arrow click handler.
+ * @param {Function} handler The function to call when the arrow is clicked
+ * @param {Object} scope (optional) Scope for the function passed above
+ */
+ setArrowHandler : function(handler, scope){
+ this.arrowHandler = handler;
+ this.scope = scope;
+ },
+
+ getMenuClass : function(){
+ return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
+ },
+
+ isClickOnArrow : function(e){
+ if (this.arrowAlign != 'bottom') {
+ var visBtn = this.el.child('em.x-btn-split');
+ var right = visBtn.getRegion().right - visBtn.getPadding('r');
+ return e.getPageX() > right;
+ } else {
+ return e.getPageY() > this.btnEl.getRegion().bottom;
+ }
+ },
+
+ // private
+ onClick : function(e, t){
+ e.preventDefault();
+ if(!this.disabled){
+ if(this.isClickOnArrow(e)){
+ if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
+ this.showMenu();
+ }
+ this.fireEvent("arrowclick", this, e);
+ if(this.arrowHandler){
+ this.arrowHandler.call(this.scope || this, this, e);
+ }
+ }else{
+ if(this.enableToggle){
+ this.toggle();
+ }
+ this.fireEvent("click", this, e);
+ if(this.handler){
+ this.handler.call(this.scope || this, this, e);
+ }
+ }
+ }
+ },
+
+ // private
+ isMenuTriggerOver : function(e){
+ return this.menu && e.target.tagName == this.arrowSelector;
+ },
+
+ // private
+ isMenuTriggerOut : function(e, internal){
+ return this.menu && e.target.tagName != this.arrowSelector;
+ }
+});
+
+Ext.reg('splitbutton', Ext.SplitButton);/**
+ * @class Ext.CycleButton
+ * @extends Ext.SplitButton
+ * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically
+ * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
+ * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
+ * button displays the dropdown menu just like a normal SplitButton. Example usage:
+ * <pre><code>
+var btn = new Ext.CycleButton({
+ showText: true,
+ prependText: 'View as ',
+ items: [{
+ text:'text only',
+ iconCls:'view-text',
+ checked:true
+ },{
+ text:'HTML',
+ iconCls:'view-html'
+ }],
+ changeHandler:function(btn, item){
+ Ext.Msg.alert('Change View', item.text);
+ }
+});
+</code></pre>
+ * @constructor
+ * Create a new split button
+ * @param {Object} config The config object
+ * @xtype cycle
+ */
+Ext.CycleButton = Ext.extend(Ext.SplitButton, {
+ /**
+ * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
+ * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
+ */
+ /**
+ * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
+ */
+ /**
+ * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
+ * button's text (only applies when showText = true, defaults to '')
+ */
+ /**
+ * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
+ * item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead
+ * fire the {@link #change} event on active item change. The changeHandler function will be called with the
+ * following argument list: (SplitButton this, Ext.menu.CheckItem item)
+ */
+ /**
+ * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button. This
+ * icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the
+ * default behavior of changing the button's icon to match the selected item's icon on change.
+ */
+ /**
+ * @property menu
+ * @type Menu
+ * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
+ */
+
+ // private
+ getItemText : function(item){
+ if(item && this.showText === true){
+ var text = '';
+ if(this.prependText){
+ text += this.prependText;
+ }
+ text += item.text;
+ return text;
+ }
+ return undefined;
+ },
+
+ /**
+ * Sets the button's active menu item.
+ * @param {Ext.menu.CheckItem} item The item to activate
+ * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
+ */
+ setActiveItem : function(item, suppressEvent){
+ if(!Ext.isObject(item)){
+ item = this.menu.getComponent(item);
+ }
+ if(item){
+ if(!this.rendered){
+ this.text = this.getItemText(item);
+ this.iconCls = item.iconCls;
+ }else{
+ var t = this.getItemText(item);
+ if(t){
+ this.setText(t);
+ }
+ this.setIconClass(item.iconCls);
+ }
+ this.activeItem = item;
+ if(!item.checked){
+ item.setChecked(true, false);
+ }
+ if(this.forceIcon){
+ this.setIconClass(this.forceIcon);
+ }
+ if(!suppressEvent){
+ this.fireEvent('change', this, item);
+ }
+ }
+ },
+
+ /**
+ * Gets the currently active menu item.
+ * @return {Ext.menu.CheckItem} The active item
+ */
+ getActiveItem : function(){
+ return this.activeItem;
+ },
+
+ // private
+ initComponent : function(){
+ this.addEvents(
+ /**
+ * @event change
+ * Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function
+ * is set on this CycleButton, it will be called instead on active item change and this change event will
+ * not be fired.
+ * @param {Ext.CycleButton} this
+ * @param {Ext.menu.CheckItem} item The menu item that was selected
+ */
+ "change"
+ );
+
+ if(this.changeHandler){
+ this.on('change', this.changeHandler, this.scope||this);
+ delete this.changeHandler;
+ }
+
+ this.itemCount = this.items.length;
+
+ this.menu = {cls:'x-cycle-menu', items:[]};
+ var checked = 0;
+ Ext.each(this.items, function(item, i){
+ Ext.apply(item, {
+ group: item.group || this.id,
+ itemIndex: i,
+ checkHandler: this.checkHandler,
+ scope: this,
+ checked: item.checked || false
+ });
+ this.menu.items.push(item);
+ if(item.checked){
+ checked = i;
+ }
+ }, this);
+ Ext.CycleButton.superclass.initComponent.call(this);
+ this.on('click', this.toggleSelected, this);
+ this.setActiveItem(checked, true);
+ },
+
+ // private
+ checkHandler : function(item, pressed){
+ if(pressed){
+ this.setActiveItem(item);
+ }
+ },
+
+ /**
+ * This is normally called internally on button click, but can be called externally to advance the button's
+ * active item programmatically to the next one in the menu. If the current item is the last one in the menu
+ * the active item will be set to the first item in the menu.
+ */
+ toggleSelected : function(){
+ var m = this.menu;
+ m.render();
+ // layout if we haven't before so the items are active
+ if(!m.hasLayout){
+ m.doLayout();
+ }
+
+ var nextIdx, checkItem;
+ for (var i = 1; i < this.itemCount; i++) {
+ nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
+ // check the potential item
+ checkItem = m.items.itemAt(nextIdx);
+ // if its not disabled then check it.
+ if (!checkItem.disabled) {
+ checkItem.setChecked(true);
+ break;
+ }
+ }
+ }
+});
Ext.reg('cycle', Ext.CycleButton);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff