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 
     }