以下のように簡略化できる要件を解決しています。私はExt.jsについてかなり新しいです。私は以下を達成するための助けが必要です。Comboboxレンダリング(オプションのパラメータ付き)
私は以下の4つのテーブルを持っています。
だから、私は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でテキストではない)が表示されますが、展開した後にテキストが表示されます。
ウィジェットの列は、グリッド内で他のコンポーネント(コンボなど)を使用する標準的な方法です。それらを使用してみてください:https://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Widget.html – user3487063
例を提供してくださいjsfiddle –
@avinashが述べたように、動作中のフィディ問題を理解するのに役立ちます。コンボストアを展開するのではなく、なぜグリッドストアをリロードするのか、なぜ 'CompanyStore'と 'CompanyStore'に同じ' CompanyModel'を持つのかという2つの質問があります。 –