2017-11-30 9 views
3

以下のように簡略化できる要件を解決しています。私はExt.jsについてかなり新しいです。私は以下を達成するための助けが必要です。Comboboxレンダリング(オプションのパラメータ付き)

私は以下の4つのテーブルを持っています。

enter image description here

だから、私は3000社の企業や様々な企業全体にマッピングされた9000人のユーザーがいます。グリッド内の各会社のモデレータをマップする必要があります。

グリッドに行を追加する追加ボタンがあります。

グリッドの最初の列に会社を表示することができました。簡単です。したがって、ユーザーは1つを選択できます。

グリッドの2番目の列にその会社に所属するユーザーを表示することができました。参考までに、ユーザーはここで複数のモデレーターを選択できます。

問題:この時点で 、私は新しい行を追加するときに、新会社を選ぶ、companyusersストアはリフレッシュなるので、1行目に選択された値はもはや有効な値ではありませんし、最初の行のユーザー列がありますIDだけの

私のモデルは

Ext.define('Mine.CompanyModel', { 
    extend: 'Ext.data.Model', 
    fields: ['Id', {name: 'Name', type:'string'}]}); 

Ext.define('Mine.UsersModel', { 
    extend: 'Ext.data.Model', 
    fields: ['Id', {name: 'Name', type:'string'}]}); 

Ext.define('Mine.CompanyUsersModel', { 
    extend: 'Ext.data.Model', 
    fields: ['company_user_id', 'UserName']}); //<companyuser Id> 

Ext.define('Mine.CompanyModeratorModel', { 
    extend: 'Ext.data.Model', 
    fields: ['Id', 'CompanyUserId']}); 

私の店があり、次のようにある空のテキストを表示する(または)

Ext.define('Mine.CompanyStore', { 
    extend: 'Ext.data.Store', 
    model: 'Mine.CompanyModel', 
    autoLoad: true, 
    proxy: new Ext.data.HttpProxy({ 
     url: '/somecontroller/someaction', 
     reader: { 
      type: 'json', 
      root: 'Data' 
     } 
    }) 
}); 

Ext.define('Mine.UsersStore', { 
    extend: 'Ext.data.Store', 
    model: 'Mine.UsersModel', 
    autoLoad: true, 
    proxy: new Ext.data.HttpProxy({ 
     url: '/somecontroller/someaction', 
     reader: { 
      type: 'json', 
      root: 'Data' 
     } 
    }), 
}); 

Ext.define('Mine.CompanyUserStore', { 
    extend: 'Ext.data.Store', 
    model: 'Mine.CompanyUserModel', 
    autoLoad: false, 
    proxy: new Ext.data.HttpProxy({ 
     url: '/somecontroller/someaction', 
     reader: { 
      type: 'json', 
      root: 'Data' 
     } 
    }), 
    //will add extra params here 
}); 

Ext.define('Mine.CompanyModeratorStore', { 
    extend: 'Ext.data.Store', 
    model: 'Mine.CompanyModeratorModel', 
    autoLoad: false, 
    proxy: new Ext.data.HttpProxy({ 
     url: '/somecontroller/someaction', 
     reader: { 
      type: 'json', 
      root: 'Data' 
     } 
    }), 

}); 

私のグリッド列は

{ 
    text: 'Company', width: '10%', dataIndex: 'id', 
    renderer: companyRenderer(combo_company), editor: combo_company 
}, 
{ 
    text: 'Users', width: '16%', dataIndex: 'company_user_id', 
    renderer: companyUsersRenderer(companyUsersCbo), editor: companyUsersCbo 
} 

私のエディタは

var companyUsersCbo = Ext.create('Ext.form.ComboBox', { 
      xtype: 'combo', 
      id: 'company_users', 
      name: 'company_users', 
      valueField: 'Id', 
      displayField: 'name', 
      allowBlank: false, 
      store: 'Mine.CompanyUsersStore', 
      multiSelect: false, 
      editable: true, 
      queryMode: 'local', 
      pickerAlign: 'bl', 
      listConfig: { 
       getInnerTpl: function (display) { 
        return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {' + display + '} </div>'; 
       } 
      } 
      listeners: { 
       expand: function() { 
        var mainGrid = Ext.getCmp('mygrid'); 
        var selmodel = mainGrid.getSelectionModel(); 
        var record = selmodel.getSelection(); 
        if (record[0].get('id') != null) { 
         this.getStore().getProxy().setExtraParam('company_id', record[0].get('id')); // am storing the company id in a model 
         this.getStore().load(); 
        } 
       } 
      } 
     }); 

私のレンダラは、私が何をしないのです

 var companyUsersRenderer = function (combo) { 
     return function (resources) { 
      var result = []; 
      resources = resources || []; 
      for (var idx = 0, len = resources.length; idx < len; idx++) { 
       var value = combo.getStore().find(combo.valueField, resources[idx]); 
       if (value != -1) { 
        var rec = combo.getStore().getAt(value); 
        result.push(rec.get(combo.displayField)); 
       } 
      } 
      return result.join(', '); 
     } 
    } 

です

ですか?コンボボックスに表示される値(名前)が次の行とは無関係になるように、どうすればよいですか。

私は何を試したのですか::別の非表示の列を追加し、名前に設定してレコードに追加しました。それはうまくいきましたが、正しい方法ではありません。また、編集のためにセルをダブルクリックすると、数値(IDでテキストではない)が表示されますが、展開した後にテキストが表示されます。

+0

ウィジェットの列は、グリッド内で他のコンポーネント(コンボなど)を使用する標準的な方法です。それらを使用してみてください:https://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Widget.html – user3487063

+0

例を提供してくださいjsfiddle –

+0

@avinashが述べたように、動作中のフィディ問題を理解するのに役立ちます。コンボストアを展開するのではなく、なぜグリッドストアをリロードするのか、なぜ 'CompanyStore'と 'CompanyStore'に同じ' CompanyModel'を持つのかという2つの質問があります。 –

答えて

1

naga Sandeep、 URLでparamsを送信して、フィルタリングされたレコードを取得しようとします。

like, 
url:'someThing/abc/1435'+'id='+record.id; 

filter your store accordingly. 
+0

問題は、各行には独自のフィルタリングがあり、レコードがあることです。 2行目がフィットした後、最初の行はそのレコードを表示していません。 –

1

問題は、グリッドがレンダリングされ、列がレンダリングされ、レンダリング機能がコンボのストアの最後の状態を使用する場合です。

CompanyUsersModelに表示フィールドを追加して、会社が選択されたときに入力します。また、私はレンダラー機能を放棄します。

関連する問題