ButtonIconMenu is a button that allows a pre-defined selection of icons to be selected via a selector menu, or by cycling through the configured icons/values (if cycleMode is set to true)
This example demonstrates the base functionality using the default component configuration.
Notice that the icons can be specified using either icon or iconCls config options.
You will also notice an additional mouseover css class applied to the blue icon
The following code was used to create this example:
var onChange = function (btn, oldVal, newVal) {
console.log(btn.id + " changed from '" + oldVal + "' to '" + newVal + "'");
};
var iconButton1 = new Ext.ux.ButtonIconMenu({
id: 'iconButton1',
value: 'R',
icons: [
{
text: 'Green',
value: 'G',
icon: 'icons/bullet_green.gif',
iconCls: ''
},
{
text: 'Red',
value: 'R',
icon: 'icons/bullet_red.gif',
iconCls: ''
},
{
text: 'Blue',
value: 'B',
icon: '',
iconCls: 'icon_blue'
}
],
listeners: {
change: onChange
},
renderTo: 'e1'
});
.icon_blue {
background: url('icons/bullet_blue.gif') no-repeat !important;
}
.x-buttoniconmenu-over .icon_blue {
background: url('icons/bullet_blue_over.gif') no-repeat !important;
}
This example demonstrates the cycleMode config and overriding the default icons.
When cycleMode is set to true, a click no longer displays the menu, but instead cycles through the available icons. The menu can still be accessed via a right click.
Notice that the blankIconCls and invalidIconCls config options have been used to override the default icons that appear for blank or invalid data.
In this example, the red icon has been configured with defaultValue set to true. Clicking the CellIconMenu whilst pressing the CTRL/CMD key will always select the default icon/value.
This example also demonstrates the ability to programmatically set the value of the iconButton
The following code was used to create this example:
var onChange = function (btn, oldVal, newVal) {
console.log(btn.id + " changed from '" + oldVal + "' to '" + newVal + "'");
};
var iconButton2 = new Ext.ux.ButtonIconMenu({
id: 'iconButton2',
blankIconCls: 'icon_blank',
invalidIconCls: 'icon_invalid',
cycleMode: true,
defaultMenuPosition: 'top',
defaultValue: 'R',
value: 'G',
icons: [
{
text: 'Green',
value: 'G',
icon: 'icons/bullet_green.gif',
iconCls: ''
},
{
text: 'Red',
value: 'R',
icon: 'icons/bullet_red.gif',
iconCls: ''
},
{
text: 'Blue',
value: 'B',
icon: '',
iconCls: 'icon_blue'
}
],
listeners: {
change: onChange
},
renderTo: 'e2'
});
new Ext.Button({
text: 'Set to blank',
renderTo: 'e2',
handler: function () {
iconButton2.setValue('');
}
});
new Ext.Button({
text: 'Set to invalid',
renderTo: 'e2',
handler: function () {
iconButton2.setValue('invalid value');
}
});
.icon_blue {
background: url('icons/bullet_blue.gif') no-repeat !important;
}
.x-buttoniconmenu-over .icon_blue {
background: url('icons/bullet_blue_over.gif') no-repeat !important;
}
.icon_blank {
background: url('icons/bullet_white.gif') no-repeat !important;
}
.icon_invalid {
background: url('icons/bullet_invalid.gif') no-repeat !important;
}
This example demonstrates some of the additional config options.
Notice that an additional 'star' icon/value was defined with the selectable config set to false. This prevents the icon/value from being selected by a user.
Also notice in this example that the Red icon will not appear in the menu (due to setting the inMenu config to false) and the blue icon will not appear in the cycle (due to setting the inCycle config to false).
The following code was used to create this example:
var onChange = function (btn, oldVal, newVal) {
console.log(btn.id + " changed from '" + oldVal + "' to '" + newVal + "'");
};
var iconButton3 = new Ext.ux.ButtonIconMenu({
id: 'iconButton3',
cycleMode: true,
value: 'G',
icons: [
{
text: 'Green',
value: 'G',
icon: 'icons/bullet_green.gif',
iconCls: ''
},
{
text: 'Red',
value: 'R',
icon: 'icons/bullet_red.gif',
iconCls: '',
inMenu: false
},
{
text: 'Blue',
value: 'B',
icon: '',
iconCls: 'icon_blue',
inCycle: false
},
{
text: 'Star',
value: '*',
icon: '',
iconCls: 'icon_star',
selectable: false
}
],
listeners: {
change: onChange
},
renderTo: 'e3'
});
new Ext.Button({
text: 'Set to *',
renderTo: 'e3',
handler: function () {
iconButton3.setValue('*');
}
});
.icon_blue {
background: url('icons/bullet_blue.gif') no-repeat !important;
}
.x-buttoniconmenu-over .icon_blue {
background: url('icons/bullet_blue_over.gif') no-repeat !important;
}
.icon_star {
background: url('icons/bullet_star.gif') no-repeat !important;
}
This example demonstrates the icon configs being loaded from a data store.
You will also see tooltips in effect.
The following code was used to create this example:
var onChange = function (btn, oldVal, newVal) {
console.log(btn.id + " changed from '" + oldVal + "' to '" + newVal + "'");
};
var data = [
[ 'Green', 'G', 'icons/bullet_green.gif', '', true, true, true, 'The Green Icon', 'Green Title' ],
[ 'Red', 'R', 'icons/bullet_red.gif', '', false, true, true, 'The Red Icon', '' ],
[ 'Blue', 'B', '', 'icon_blue', true, false, true, 'The Blue Icon', '' ]
];
var store = new Ext.data.SimpleStore({
fields: [ 'text', 'value', 'icon', 'iconCls', 'inMenu', 'inCycle', 'selectable', 'qtip', 'qtitle' ],
data: data
});
var iconButton4 = new Ext.ux.ButtonIconMenu({
id: 'iconButton4',
value: 'B',
cycleMode: true,
store: store,
renderTo: 'e4',
listeners: {
change: onChange
},
});
.icon_blue {
background: url('icons/bullet_blue.gif') no-repeat !important;
}
.x-buttoniconmenu-over .icon_blue {
background: url('icons/bullet_blue_over.gif') no-repeat !important;
}