EXTJS 3.2.1 EditorGridPanel - 与jsonstore组合框

Question

我正在使用EXCJS与editorgridpanel，我试图插入一个组合框，填充JsonStore。 这里是我的代码的快照： THE STORE：

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; 
}; 

组合：

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

其实，这个问题似乎是，电网呈现组合框的值存储数据的加载之前。 我发现了一些东西here。

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

Answer 2

这是一个常见问题。如果您需要商店值显示在组合中，请处理商店的load事件，并在此之后选择组合中的适当值。你不应该需要一个特定的记录来提供组合。

Answer 3

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

这会产生更好的性能。

Answer 4

问题的核心是你需要挂接一个侦听器，它将在网格存储加载后执行。该听众然后将组合网格内容转换为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 
     }