ExtJsの関連リスト

異常なことはありません。動的な「リンクリスト」インターフェースを作成する際の最も一般的なタスクの1つを実装するだけです。 誤解がないように、2つ以上のExt.form.ComboBox要素を意味します。1つの値を選択すると、2番目の値が読み込まれます。



2つのモデルがあるとします。

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モデルは、ユーザーグループのデータ構造と、ユーザー自身のユーザーを記述します。 構造自体は原始的であるため、それらについては詳しく説明しません。 次に、各モデルに基づいて、リポジトリを作成する必要があります。

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

2つのストレージは、以前に定義されたモデルを使用し、サーバーから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' }); 

2つの単純な要素を作成し、必要なストレージを指定し、表示される値として使用されるモデルのフィールドと、valueプロパティの値として使用されるフィールドを決定します。 その後、グループ選択イベントハンドラーを配置するだけです。

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

複雑なこともありません。次の3つの簡単な手順を実行するだけで済みます。
1.現在のユーザーのリストをクリアします。 すでにグループを選択している場合。
2.選択したグループに基づいて、ユーザーリポジトリのURLを設定または変更します。
3.更新されたリポジトリURLのデータを要求します。

最後に、Ext.form.ComboBox要素をフォームパネルに配置します。

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

それは基本的にそれです。