Related lists in ExtJs

Nothing unusual, just my implementation of one of the most common tasks when creating dynamic interfaces "linked lists". In order to avoid misunderstandings, I mean two or more Ext.form.ComboBox elements, the choice of the 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, on the basis of 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 repositories use 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 noting that the autoLoad parameter in the user repository is false. This is done because the ID of the selected group has not yet been determined, and the script returns a list of users only when the group ID is sent.

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

  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 field of the model will be used as the displayed value, and which as the value for the value property. After that, it remains only to put down a handler for the group selection event.

  groupsCombobox.on('select', function () { //     usersCombobox.clearValue(); //   URL    userStore.proxy.url = '/users/' + this.getValue() + '.html'; //       userStore.load(); }); 

Here, too, there is nothing difficult, you need to perform only three simple steps:
1. Clear the current list of users. if you have already chosen some group.
2. Based on the selected group, set or change the URL for the user store.
3. Request data on the updated URL from the repository.

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

  var searchForm = Ext.create('Ext.form.Panel', { title: ' ', items: [groupsCombobox, usersCombobox], }); 

That's basically it.