Related Lists in ExtJs

Nothing unusual, just my implementation of one of the most common tasks when creating dynamic "linked lists" interfaces. So that there is no misunderstanding, I mean two or more Ext.form.ComboBox elements, the choice of a value in one of which affects the loaded values ​​in the second.



Suppose there are two models.

	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'
			}
		]
	});

Accordingly, the UserGroup model describes the data structure for user groups, and User for the users themselves. The structures themselves are primitive, so I will not dwell on them. Next, based on each model, you need to create a repository.

	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'
			}
		}
	});

Two storages use the previously defined models and load data from the server in JSON, in which the list of users is contained in the users branch, and the list of groups in the groups branch. It is also worth paying attention to the fact that the user repository has the autoLoad parameter set to false. This is done because the ID of the selected group is not yet defined, and the script returns a list of users only when transmitting the group ID.

Now you need to create Ext.form.ComboBox elements for both repositories.

	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'
	});

We create two simple elements, specify the necessary storages, and also determine which model field will be used as the displayed value, and which as the value for the value property. After that, it remains only to put down the group selection event handler.

	groupsCombobox.on('select', function () {
		// Очищаем текущий список пользователей
		usersCombobox.clearValue();
		// Устанавливаем новый URL для хранилища пользоваталей
		userStore.proxy.url = '/users/' + this.getValue() + '.html';
		// Подгружаем новые данные в хранилище пользоваталей
		userStore.load();
	});

There is also nothing complicated, you need to perform only three simple steps:
1. Clear the current list of users. if you have already selected a group.
2. Based on the selected group, set or change the URL for the user repository.
3. Request data for the updated repository URL.

Well, the last step is to place the Ext.form.ComboBox elements on the form panel.

	var searchForm = Ext.create('Ext.form.Panel', {
		title: 'Связанные списки',
		items: [groupsCombobox, usersCombobox],
	});

That's basically it.