Ничего необычного, просто моя реализация одной из самых распространенных задач при создании динамических интерфейсов «связанные списки». Дабы не возникло недопонимания, я имею ввиду два и более элемента Ext.form.ComboBox, выбор значения в одном из которых влияет на подгружаемые значения во втором.
Предположим есть две модели.
Соответственно модель UserGroup описывает структуру данных для групп пользователей, а User для самих пользователей. Сами структуры примитивные, так что останавливаться на них не буду. Далее на основании каждой модели нужно создать хранилище.
Два хранилища, используют ранее определенные модели и подгружают с сервера данные в JSON, в которых список пользователей содержится в ветке users, а список групп в ветке groups. Так же стоит обратить внимание на то, что у хранилища пользователей параметр autoLoad равен значению false. Это сделано потому что ID выбранной группы еще не определен, а скрипт возвращает список пользователей только при передаче ID группы.
Теперь необходимо создать элементы Ext.form.ComboBox для обоих хранилищ.
Создаем два простых элемента, указываем необходимые хранилища, а так же определяем какое поле модели будет использоваться в качестве отображаемого значения, а какое в качестве значения для свойства value. После чего остается только проставить обработчик события выбора группы.
Тут тоже нет ничего сложного, нужно выполнить всего три простых действия:
1. Очистить текущий список пользователей. если ранее уже выбирали какую-то группу.
2. На основании выбранной группы установить или сменить URL для хранилища пользоваталей.
3. Запросить данные по обновленному URL-у хранилища.
Ну и последним этапом размещаем элементы Ext.form.ComboBox на панели формы.
Вот в принципе и все.
Предположим есть две модели.
Ext.define('User', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{
name: 'id',
type: 'int'
}, {
name: 'login',
type: 'string'
}
]
});
Ext.define('UserGroup', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{
name: 'id',
type: 'int'
}, {
name: 'title',
type: 'string'
}
]
});
Соответственно модель UserGroup описывает структуру данных для групп пользователей, а User для самих пользователей. Сами структуры примитивные, так что останавливаться на них не буду. Далее на основании каждой модели нужно создать хранилище.
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'users'
}
}
});
var userGroupStore = Ext.create('Ext.data.Store', {
model: 'UserGroup',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/groups/',
reader: {
type: 'json',
root: 'groups'
}
}
});
Два хранилища, используют ранее определенные модели и подгружают с сервера данные в JSON, в которых список пользователей содержится в ветке users, а список групп в ветке groups. Так же стоит обратить внимание на то, что у хранилища пользователей параметр autoLoad равен значению false. Это сделано потому что ID выбранной группы еще не определен, а скрипт возвращает список пользователей только при передаче ID группы.
Теперь необходимо создать элементы Ext.form.ComboBox для обоих хранилищ.
var usersCombobox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Пользователи',
emptyText: 'Выберите пользователя',
store: userStore,
displayField: 'login',
valueField: 'id'
});
// Create groups combobox
var groupsCombobox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Группы',
emptyText: 'Выберите группу',
store: userGroupStore,
displayField: 'title',
valueField: 'id'
});
Создаем два простых элемента, указываем необходимые хранилища, а так же определяем какое поле модели будет использоваться в качестве отображаемого значения, а какое в качестве значения для свойства value. После чего остается только проставить обработчик события выбора группы.
groupsCombobox.on('select', function () {
// Очищаем текущий список пользователей
usersCombobox.clearValue();
// Устанавливаем новый URL для хранилища пользоваталей
userStore.proxy.url = '/users/' + this.getValue() + '.html';
// Подгружаем новые данные в хранилище пользоваталей
userStore.load();
});
Тут тоже нет ничего сложного, нужно выполнить всего три простых действия:
1. Очистить текущий список пользователей. если ранее уже выбирали какую-то группу.
2. На основании выбранной группы установить или сменить URL для хранилища пользоваталей.
3. Запросить данные по обновленному URL-у хранилища.
Ну и последним этапом размещаем элементы Ext.form.ComboBox на панели формы.
var searchForm = Ext.create('Ext.form.Panel', {
title: 'Связанные списки',
items: [groupsCombobox, usersCombobox],
});
Вот в принципе и все.