В настоящее время я работаю над переносом кода из ExtJS 4.2 в ExtJS 5.1. И я заметил много изменений в поведении многих компонентов.Как исправить навигацию по ключевым словам по умолчанию в Extjs 5.1?
Одна из вещей, которые я заметила, заключается в том, что по умолчанию вкладка клавиш переключения между компонентами изменилась и в этом случае не вполне предсказуема.
Для воспроизведения перейдите к 4.2 fiddle here, а затем щелкните по первому текстовому полю, нажмите вкладку, а затем измените поле со списком фокусировки на состояние; снова нажмите клавишу табуляции, и она перейдет к кнопке «Далее», снова ударит табуляцию, и она перейдет к переключателю «Вторая опция» и т. д. в предсказуемом порядке.
Затем повторите то же самое на 5.1 fiddle here. Первое, что вы заметите, это то, что радиостанция «Мой первый вариант» не отмечена (это еще одна проблема), но главной проблемой, которую я хотел бы исправить, является нечетный порядок, который он следует при нажатии клавиши табуляции.
Как я могу сделать навигацию по ключевому слову так, как в версии 4.2?
В том числе образец кода здесь:
// 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();
}
});
Я не считаю это как точный ответ, так что я действительно хотел, чтобы каким-то образом настроить навигацию порядок, не будучи вынужденным изменить состав моей точки зрения. Но я включаю этот ответ, потому что это то, что я использовал в конце для решения проблемы. Если через пару дней никто не ответит более удовлетворительным ответом, я буду отмечать это как правильный ответ. – jacoviza