For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance, Chielus
For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance, Chielus
I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.
See this example:
{
xtype: 'button',
text: 'Choice 1',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 2',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 3',
toggleGroup: 'mygroup'
}
Buttons also have a property called enableToggle
, that allows them to toggle, and is automatically set to true when you set a toggleGroup
, and toggleGroup
tells ExtJS how they are related.
Note, they look like regular ExtJS buttons, but behave like you want.
ButtonGroup
will give you any advantages.
There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to false:
{
xtype: 'radiogroup',
layout: 'hbox',
defaultType: 'button',
defaults: {
enableToggle: true,
toggleGroup: 'mygroup',
allowDepress: false,
items: [
{ text: 'Choice 1'},
{ text: 'Choice 2'},
{ text: 'Choice 3'}
]
}
}
Just to answer @mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:
listeners: {
click: function(me, event) {
// make sure a button cannot be de-selected
me.toggle(true);
}
}
That way, each click on a button will re-select it.
-DBG
Just adding to the @deebugger post. You can also use the following button property to not allow to deselect a selection
Ext.create('Ext.Button', {
renderTo : Ext.getBody(),
text : 'Click Me',
enableToggle : true,
allowDepress : false
});