ExtJs - 网格编辑器中远程存储组合框的渲染器答案

【问题标题】：ExtJs - Renderer for remote store combobox in grid editorExtJs - 网格编辑器中远程存储组合框的渲染器
【发布时间】：2014-07-21 19:40:49
【问题描述】：

我知道有人在某个地方一次又一次地问过这个问题，但我找不到作为此类问题标准的可靠答案。

正如许多人所做的那样，我在网格内有一个编辑器，它是一个使用数据库远程存储的组合框。现在假设数据库中有一个包含 50,000 条记录的表。组合框仅加载前 15 个。当我在这 15 个之间选择记录时，一切都显示正常。要渲染 displayField 而不是 valueField，我使用以下函数

  renderCombobox : function(value, metaData, record, rowIndex, colIndex, store, view, isNewRow){      
      var me      = this,
          columns = me.columns,
          editor, editorStore, editorIndex, displayField, display, rec;

    for(var i=0,j=columns.length;i<j;i++){          
      if(columns[i].getEditor){
          editor = columns[i].getEditor(record);
          if(editor.xtype === 'combobox'){
              editorStore   = editor.getStore().load();
              editorIndex   = editorStore.findExact(editor.valueField, value);
              displayField = editor.displayField;
          }
      }
    }      
    if(editorIndex != -1){
        rec = editorStore.getAt(editorIndex);
        if(rec && rec.get(displayField)){
            display = rec.get(displayField);
        }               
    }      
    return display;        
}

问题出在以下场景。

如果我提前输入，我可以找到不在这 15 条记录之间的记录。例如记录 42,300。我选择它，目前一切正常。现在，如果我单击网格中另一个编辑器上的另一个字段（即日期字段），则渲染器组合框的函数返回 undefined，因为它试图找到存储中不存在的记录值为 42,300 的记录。调试器说商店再次只包含前 15 条记录。

有什么我想念的配置吗？商店需要一个限制。我不能一次从数据库中提取 50,000 条记录。

【问题讨论】：

我认为一种方法是使用this.store.on({beforeload:somefns,load:somefns})。这两个函数应该负责查找来自数据库的组合框的最后一个值，并将其插入到带有store.insert(0,record) 的存储中。因此，每次第一条记录都是远程源的记录。今晚晚些时候我会尝试一下，如果我有解决方案，我会回来的。这可能对其他人有用。

标签： extjs combobox grid editor extjs4.2

【解决方案1】：

Saki 的精彩文章为我提供了解决此任务的线索。

您不需要任何渲染器，只需为您的组合添加一个包含所有键值对的附加存储，并将“编辑”事件添加到网格。

在这里。

您的额外远程商店：

Ext.define('crm.store.BillAdTarifsStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'BillAdTarifsStore',
    requires    : 'crm.model.BillAdTarifsModel',
    model       : 'crm.model.BillAdTarifsModel',
    autoLoad    : true 
});

它的型号：

Ext.define('crm.model.BillAdTarifsModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id',        type: 'int'},
        { name: 'VarName',   type: 'string' }
    ],
    proxy   : {
        type    : 'ajax',
        url     : AjaxUrl,
        reader  : {
            type            : 'json',
            idProperty      : 'id',
            root            : 'data',
            totalProperty   : 'total',
            successProperty : 'success',
            messageProperty : 'message'
        },
        extraParams  : {
            Action   : 'DataRequest',
            DataType : 'GetBillAdTarifs'
        }
    }
});

网格配置：

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
],
listeners: {
    // this event will change valueField in cell to the displayField (after choosing combo item)
    edit: function(e, eOpts) {
        // eOpts.rowIdx - is the index of row with clicked combo
        var SelectedComboId = Number(Ext.getCmp('ObjectsGrid').getStore().getAt( eOpts.rowIdx ).get('YourGridColumnName'));
        console.log( 'SelectedComboId: '+SelectedComboId );

        if(Number(SelectedComboId) > 0) {
            // ComboItemObj - get field name by index from additional store
            var ComboItemObj = Ext.data.StoreManager.lookup('BillAdTarifsStore').getById(SelectedComboId);
            if ( typeof ComboItemObj.data.id !== null && Number(ComboItemObj.data.id)>0 ) {
                // real combo item is chosen, set field name
                    Ext.getCmp('ObjectsGrid').getStore().getAt(eOpts.rowIdx).set('TrfCianBig',ComboItemObj.data.VarName);
            }
        }
    }

列配置可能如下所示：

editor  : new Ext.form.field.ComboBox({
    triggerAction : 'all',
    forceSelection: false,
    editable    : false,
    allowBlank  : true,
    displayField: 'VarName',
    valueField  : 'id',
    store       : Ext.data.StoreManager.lookup('BillAdTarifsComboStore'),
        listeners: {
                 'change': function(comp, newValue, oldValue, eOpts) {
                               // Selected combo id value
                               var ComboValue  = comp.getValue();
                                // save data by some Ext.Ajax.request
                                },
                 click: {
                            // you can preload combo store with specifig parameters
                            element: 'el', 
                            fn  : function (store, operation, eOpts) {
                                .....
                                ComboStore.load({
                                        params: {
                                            SomeId : SomeParam
                                        }
                                    });

【讨论】：

【解决方案2】：

我认为这个例子正是你想要的：http://extjs.eu/ext-examples/#combo-in-grid

【讨论】：