206 lines
7.9 KiB
HTML
206 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-CycleButton-method-constructor'><span id='Ext-CycleButton'>/**
|
|
</span></span> * @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, {
|
|
<span id='Ext-CycleButton-cfg-items'> /**
|
|
</span> * @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'})
|
|
*/
|
|
<span id='Ext-CycleButton-cfg-showText'> /**
|
|
</span> * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
|
|
*/
|
|
<span id='Ext-CycleButton-cfg-prependText'> /**
|
|
</span> * @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 '')
|
|
*/
|
|
<span id='Ext-CycleButton-cfg-changeHandler'> /**
|
|
</span> * @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)
|
|
*/
|
|
<span id='Ext-CycleButton-cfg-forceIcon'> /**
|
|
</span> * @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.
|
|
*/
|
|
<span id='Ext-CycleButton-property-menu'> /**
|
|
</span> * @property menu
|
|
* @type Menu
|
|
* The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
|
|
*/
|
|
|
|
<span id='Ext-CycleButton-method-getItemText'> // private
|
|
</span> getItemText : function(item){
|
|
if(item && this.showText === true){
|
|
var text = '';
|
|
if(this.prependText){
|
|
text += this.prependText;
|
|
}
|
|
text += item.text;
|
|
return text;
|
|
}
|
|
return undefined;
|
|
},
|
|
|
|
<span id='Ext-CycleButton-method-setActiveItem'> /**
|
|
</span> * 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, suppressEvent);
|
|
}
|
|
if(this.forceIcon){
|
|
this.setIconClass(this.forceIcon);
|
|
}
|
|
if(!suppressEvent){
|
|
this.fireEvent('change', this, item);
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-CycleButton-method-getActiveItem'> /**
|
|
</span> * Gets the currently active menu item.
|
|
* @return {Ext.menu.CheckItem} The active item
|
|
*/
|
|
getActiveItem : function(){
|
|
return this.activeItem;
|
|
},
|
|
|
|
<span id='Ext-CycleButton-method-initComponent'> // private
|
|
</span> initComponent : function(){
|
|
this.addEvents(
|
|
<span id='Ext-CycleButton-event-change'> /**
|
|
</span> * @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);
|
|
},
|
|
|
|
<span id='Ext-CycleButton-method-checkHandler'> // private
|
|
</span> checkHandler : function(item, pressed){
|
|
if(pressed){
|
|
this.setActiveItem(item);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-CycleButton-method-toggleSelected'> /**
|
|
</span> * 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);</pre>
|
|
</body>
|
|
</html>
|