Вход

Просмотр полной версии : Как ограничить выбор значений из combobox


Ambassador
09.09.2018, 21:58
Приветствую.
В окне создания и редактирования записей у меня есть поле типа combobox
Ext.define('BookApp.view.Book', {
extend: 'Ext.window.Window',
alias: 'widget.bookwindow',
width : 450,
title: 'Book',
layout: 'fit',
autoShow: true,
modal : true,
initComponent: function() {
this.items = [{
xtype: 'form',
items: [
{
xtype: 'combobox',
fieldLabel: 'Status',
name: 'status',
store: Ext.data.StoreManager.lookup('Statuses'),
valueField: 'id',
displayField: 'name',
typeAhead: true,
queryMode: 'remote'

},
...............

Store Statuses отдает записи из таблицы с полями id, name, order_install , где order_install это порядок установки статуса.

table Statuses

id name order_install

23 New 1

24 In Work 2

29 Postponed 3

34 Shipped 4

31 In_transit 5

Как сделать что бы выбор значения из списка статусов был ограничен только на одно значение вверх или вниз согласно полю order_install?

Для примера: Если статус In Work , то доступные для выбора были только статусы Postponed и New

Спасибо

Infarch
11.09.2018, 10:27
Раз вы создаете айтемы в ините то проблем вообще нет. Создайте свой стор и заполните его тремя строками из Statuses. Передайте его в конфиг.

Ambassador
11.09.2018, 13:05
Спасибо.
В целом, решение выглядит так:
Ext.application({
name : 'Fiddle',

launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});

function filterCombo(combobox, index) {
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.internalId == index - 1) || (record.internalId == index) || (record.internalId == index + 1)) {
return true;
} else {
return false;
}
}
);
};

Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose items',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
value: '24', // Equals to "In Work"
multiSelect: false,
renderTo: Ext.getBody(),
listeners: {
'select': function (combo, records) {
index = records.internalId;
filterCombo(combo, index);
},
'render': function (combo) {
index = combo.getSelection().internalId;
filterCombo(combo, index);
}
}
});
}
});