Question

我正在使用带有editorgridpanel的EXTJS，我正在尝试插入一个用JsonStore填充的组合框。这是我的代码的快照：商店：

kmxgz.ordercmpappro.prototype.getCmpapproStore = function(my_url) {
 var myStore = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({
       url: my_url
     , method: 'POST'
    })
  , reader: new Ext.data.JsonReader({
         root: 'rows',
         totalProperty: 'total',
         id: 'list_cmpappro_id',
         fields: [
                    {name: 'list_cmpappro_id', mapping: 'list_cmpappro_id'}
                   , {name: 'list_cmpappro_name', mapping: 'list_cmpappro_name'}
             ]
      })
  , autoLoad: true
    , id: 'cmpapproStore'
     , listeners: {
                load: function(store, records, options){
              //store is loaded, now you can work with it's records, etc.
              console.info('store load, arguments:', arguments);
              console.info('Store count = ', store.getCount());
       }
       }
 });
 return myStore;
};

THE COMBO：

kmxgz.ordercmpappro.prototype.getCmpapproCombo = function(my_store) {
 var myCombo = new Ext.form.ComboBox({
     typeAhead: true,
     lazyRender:false,
      forceSelection: true,
     allowBlank: true,
     editable: true,
      selectOnFocus: true,
      id: 'cmpapproCombo',
     triggerAction: 'all',
     fieldLabel: 'CMP Appro',
     valueField: 'list_cmpappro_id',
     displayField: 'list_cmpappro_name',
     hiddenName: 'cmpappro_id',
  valueNotFoundText: 'Value not found.',
     mode: 'local',
     store: my_store,
     emptyText: 'Select a CMP Appro',
        loadingText: 'Veuillez patienter ...',        
     listeners: {

                // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
                // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
                change: function(combo, newValue, oldValue){
                    console.log("Old Value: " + oldValue);
                    console.log("New Value: " + newValue);
                },

                // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
                select: function(combo, record, index){
                    console.log(record.data.name);
                    console.log(index);
                }
            }

 });
 return myCombo;
};

将组合框插入editorgridpanel中。有这样的渲染器：

Ext.util.Format.comboRenderer = function(combo){
    return function(value, metadata, record){
        alert(combo.store.getCount()); //<== always 0!!
        var record = combo.findRecord(combo.valueField || combo.displayField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
};

第一次显示网格时，我没有显示displayField，而是：“找不到值”。我从渲染器获得警报：0（alert（combo.store.getCount（）））。但我可以在控制台中看到数据已正确加载！即使我尝试从渲染器（combo.store.load（）;）重新加载商店，我仍然有警报（0）！但是当我选择组合来更改值时，我可以看到数据，当我更改值时，我可以看到displayFiel！我不明白是什么问题？从现在开始的几天，我已经尝试过我发现的所有解决方案......但仍然没有！欢迎任何建议！

熊龙

Answer 1

问题的核心是你需要挂钩一个在加载网格存储后执行的监听器。然后，该侦听器将组合网格内容转换为displayField内容而不是valueField。以下是我对此问题的解决方案。

Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboBoxRenderer = function(combo, grid) {
    var getValue = function(value) {
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : value;
    };

    return function(value) {
        var s = combo.store;
        if (s.getCount() == 0 && grid) {
            s.on({
                load: {
                    single: true,
                    fn: function() {
                        grid.getView().refresh()
                    }
                }
            });
            return value
        }
        return getValue(value)
    }
};

您可以在代码中使用此渲染器，如下所示：

{
            header: 'Header',
            dataIndex: 'HeaderName',
            autoWidth: true,
            renderer: Ext.ux.renderer.ComboBoxRenderer(combo, grid),
            editor: combo
        }

Answer 2

实际上，问题似乎是网格在加载商店数据之前呈现组合框值。我发现了一些here。

但是当我应用覆盖时，仍然存在同样的问题...... 问题i：如何推迟组合框的渲染，等待加载商店？

Answer 3

这是一个常见问题。如果您需要在组合中显示商店值，请处理商店的load事件，然后仅在该组合中选择适当的值。您不需要特定的记录就可以直接渲染组合。

Answer 4

我建议将组合框商店中所需的字段添加到网格的商店，并更改渲染器以使用该字段。（它不必在数据库中）在网格的afteredit事件中，从组合框的商店中获取该值并将其复制到网格商店。

这会产生更好的表现。

EXTJS 3.2.1 EditorGridPanel - 带有jsonstore的ComboBox

4 个答案: