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.
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
});
Related
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
I can add my own button to the built-in tools "Help" etc on the panel header:
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
header: {
layout: {
type: 'hbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'test'
}]
} ...
but button 'test' appears far left before the panel title ... header layout hbox right obviously not the way to do it :-). Button 'test' just a placeholder - I want to eventually add a menu button - so another css tool would not work - is there a simple way of doing this or do I need to use dom element positiong etc? tia.
If you're using ExtJS 4.2, you can use the titlePosition property to accomplish this. See http://jsfiddle.net/U8MSd/
tools: [{
type: 'help',
tooltip: 'Get Help',
handler: function (event, toolEl, panel) {
// show help here
}
}],
header: {
titlePosition: 0,
items: [{
xtype: 'button',
text: 'test'
}]
}
I have a toolbar with some buttons and one of the buttons needs to be invisible at creation and visible at some point in my app.
I'm currently adding the button when it needs to be visible but that is not exactly what I want.
When you create the button you can set hidden: true in the config.
Or you can 'hide()' the button soon after adding it and then 'show()' it at a later date.
find the button and make it invisible
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button',
id: 'my-btn',
hidden: true
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
I have a grid with a toolbar as given below
{
xtype: 'tbbutton',
text: 'Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
}
I want to write handler such that when I choose 'Good' the button text should change from 'Button' to 'Good'
I am able to access text property in the handler
Please help me..
Here are two examples:
Either you can give the toolbar button an ID
....
xtype: 'tbbutton',
id: 'mytoolbarbutton',
text: 'Button',
....
and access the button using
var button = Ext.getCmp('mytoolbarbutton');
Or you can create the button like this and add it to the toolbar afterwards:
var button = new Ext.Button({
text: 'Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
});
myToolbar.add(button);
This way you have a handle to the button even though it is added to the toolbar.