How to fix default tab key navigation in Extjs 5.1? - javascript

Currently I'm working on a code migration from ExtJS 4.2 to ExtJS 5.1. And I noticed MANY changes on default behavior of many components.
One of the things I noticed is that the default tab key navigation between components has changed and in this case is not quite predictable.
To reproduce go to the 4.2 fiddle here, and then click on the first text field, hit tab and then it would change focus to state combo box; hit tab again and it would go to "Next" button, hit tab again and it would go to "Second option" radio button, and so on in a predictable order.
Then repeat the same thing on 5.1 fiddle here. First thing you'll notice is that "My First Option" radio is unchecked (that's another issue), but the main issue I would like to fix is the odd order it follows on tab key press.
How can I make tab key navigation behave as it did on 4.2 version?
Including sample code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
}
]
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});

Well, I did not find a way to tell ExtJS 5.1 to navigate through the form as it did on 4.2, but I managed to get the desired behavior by modifying my form composition (although it looks the same) in a way that ExtJS 5.1 was able to orderly follow.
To make that happen I removed the radiogroup component but kept all that was inside of it (which was pretty much the whole form content). It seems that structure didn't feel quite natural to the updated framework.
Here is a fiddle with the mentioned changes.
Including code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});

Related

How to remove disabled attribute in Ext JS

I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?
As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})

ExtJS conditionally render input fields

I have the following code in ExtJS
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Panel title',
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'FirstName',
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'LastName',
},{
xtype:'fieldset',
title: 'Phone Number',
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business',
toBeRendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE // custom property that must restrict rendering
rendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE //doesn't work
}]
}]
}]
});
I want to create an application, that will have properties file where I can set up flags for SUPPORTED fields e.g IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE = false. If it's false than text input fieldLabel: 'Business' will not be rendered at all - no hidden/disabled text input Business in html.
I've tried rendered property - but it doesn't work, the only solution so far is to use items = Ext.Array.filter(items,filterFunction) in onRender;
Are there any other solutions how can I restrict rendering input elements?
Thanks in advance.
Instead of the constructor, use the initItems method:
Ext.define('MyComponent', {
extend: 'Ext.panel.Panel',
xtype: 'mycomponent',
bodyPadding: 10,
border: true,
title: 'My component',
items : [
{
xtype: 'button',
text: 'My allowed button'
}
],
initItems : function() {
var items = this.items;
// Your conditions
if (false) {
items.push({
xtype: 'button',
text: 'My denied button'
});
}
this.callParent();
}
});
https://fiddle.sencha.com/#fiddle/17qi
I think that best approach is to define custom components for your application parts and add required components within its constructor, like this:
constructor: function () {
var myComponentItems = [
{
xtype: 'button',
text: 'My allowed button'
}
];
// Your conditions
if(false) {
myComponentItems.push({
xtype: 'button',
text: 'My denied button'
});
}
Ext.apply(this, {
items: myComponentItems
});
this.callParent(arguments);
}
Working fiddle

Show hide elements in extjs

I'm trying to show and hide radiogroups, based on selection from a drop-sown selection. So that if i choose toshiba only the toshiba models appear, else if i choose hp only the hp models appear. Now the functionality is working, however at the beginning before selecting anything, both models (hp and toshiba) are showing, however i want it so that only the toshiba models are showing at the beginning. I tried giving the hp models, the property hidden:true..But when selecting hp, the models no longer appear. Any idea on how to display only one model at the beginning?
toshibatypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'toshiba',
width:'100%',
items: [
{
checked: true,
boxLabel: 'Toshiba 1',
name: 'toshibas',
inputValue: 'toshiba1',
xtype:'radiofield'
},
{
boxLabel: 'Toshiba 2',
name: 'toshibas',
inputValue: 'toshiba2',
xtype:'radiofield'
}
]
});
hptypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'hp',
width:'100%',
items: [
{
checked: true,
boxLabel: 'HP 1',
name: 'hps',
inputValue: 'hp1',
xtype:'radiofield'
},
{
boxLabel: 'HP 2',
name: 'hps',
inputValue: 'hp2',
xtype:'radiofield'
}]
});
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable:false,
width: 100,
listeners: {
select: function() {
var iComboValue = laptoptypes.getValue();
switch(iComboValue) {
case "toshibatypes" :
{
Ext.get("toshiba").show();
Ext.get("hp").hide();
break;
}
case "hptypes" :
{
Ext.get("hp").hide();
Ext.get("toshiba").show();
break;
}
}
}
}
});
If you configure hidden on the view declaration you can use setHidden( boolean ).
var iComboValue = laptoptypes.getValue();
Ext.get("toshiba").setHidden(iComboValue !== 'toshibatypes');
Ext.get("hp").setHidden(iComboValue !== 'hptypes');

Ext js change a toolbar item

It should be possible to change items on a toolbar, but somehow changes are never displayed. Somehow something is wrong, and I can't find it. I also can't change text or a button state neither.
I need to change the 'all' checkbox. Changing is done in our controller by:
Ext.widget('gw_main_signals').down('#all').setValue(false);
and the view is (shortened):
Ext.define('GW.view.main.Signals', {
extend: 'Ext.grid.Panel',
alias: 'widget.gw_main_signals',
store: 'signal.Signals',
initComponent: function() {
this.bbar = Ext.
create('Ext.PagingToolbar', {
store: this.store,
displayInfo: true,
displayMsg: '{0} - {1} / {2}',
emptyMsg: ''
});
this.callParent(arguments);
},
autoScroll: true,
dockedItems: [{
xtype: 'toolbar',
itemId: 'signalToolbar',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'label',
html: bundle.getMsg('state') + ':',
}, {
xtype: 'button',
text: bundle.getMsg('new'),
itemId: 'new',
enableToggle: true,
pressed: true
// pressed by default
}, '-', {
// xtype: 'button',
// xtype: 'menucheckitem',
xtype: 'checkboxfield',
boxLabel: bundle.getMsg('all'),
itemId: 'all',
}]
}],
columns: [...],
});
Thanks for any help!

ExtJS - reading a property from a custom panel

I'm trying to read a property from my custom panel for using it into a property item from the same panel. Let me show my code so you can understand what I mean:
Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
title: 'My Panel',
autoScroll: true,
isMyProperty: false,
defaults: {
margin: 4,
xtype: 'horizontalfieldpanel'
},
items: [
{
title: 'SOme title',
itemId: 'title1',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: !this.isMyProperty
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
allowBlank: !this.isMyProperty
}, {
As you can see I have isMyProperty and I'm trying to use it on allowBlank, but it is not taking it. it is taking the value for default.
Any idea what I'm doing wrong?
Thanks,
The conventional way is to use the 'config' subsystem. This tells it to add a new configuration option to your class which also generates a getter/setter method for it.
The configuration option can be overridden when the panel is constructed just like any other config option in the base class.
One trick is that your items must then be constructed in the initComponent method as opposed to doing it in the class definition. I've found that in sophisticated applications, it's better to plan on overriding initComponent to create your items instead of using "static" item declarations in most situations.
Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
config: {
isMyProperty: false
},
title: 'My Panel',
autoScroll: true,
defaults: {
margin: 4,
xtype: 'horizontalfieldpanel'
},
initComponent: function() {
this.items = [{
title: 'Some title',
itemId: 'title1',
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: !this.#getIsMyProperty()
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
allowBlank: !this.#getIsMyProperty()
}, {
...
}]
}];
this.callParent(arguments);
}
});
To override the value at construction:
var panel = Ext.create('XXX.XXXX.XXXX.MyPanel', {
isMyProperty: true
});

Categories