🛕 🥛 👨🏿‍🎤 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], });

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

ExtJsの関連リスト

More articles: