Question

我正在解决一个可简化如下的要求。我是Ext.js的新手，我需要帮助才能实现以下目标。

我有4张表如下。

因此，我有3000家公司和9000名用户映射到不同的公司。我需要为网格中的每个公司映射版主。

我有一个添加按钮，在网格中添加一行。

我实现了在网格的第一列中显示公司。简单。因此用户可以选择一个。

我在网格的第二列显示了属于该公司的用户。仅供参考，用户可在此处选择多个版主。

问题：此时，当我添加新行，选择一个新公司时，公司用户商店会刷新，因此，第一行中选择的值不再是有效值，并且第一行的用户列正在显示空文本（或）仅限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＆＃39; s而不是文本），但在展开后，它会显示文本。

Answer 1

Sandeep，尝试使用您的URL发送params以获取过滤记录。

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

filter your store accordingly.

Answer 2

问题在于渲染网格时，渲染列并且渲染函数使用组合商店的最后状态。

我会向CompanyUsersModel添加一个显示字段，然后在选择公司时填写它。我也会放弃渲染器功能。

Combobox渲染可选参数

2 个答案: