EXTJS 3.2.1 EditorGridPanel - ComboBox с jsonstore

Question

Я использую 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;
};

КОМБО:

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

Поле со списком вставляется в панель редактора. Вот такой рендер:

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! Я не понимаю, в чем проблема? Уже несколько дней я пробовал все решения, которые нашел ... но все равно ничего! Любой совет приветствуется!

Yoong

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

Это распространенная проблема. Если вам нужно, чтобы значение хранилища отображалось в комбо, обработайте событие магазина load и выберите соответствующее значение в комбо только после этого. Вам не нужна конкретная запись только для того, чтобы визуализировать комбо сразу.

Answer 3

Я бы порекомендовал добавить требуемое поле из хранилища комбинированного списка в хранилище сетки и изменить средство визуализации, чтобы использовать это поле. (Это не обязательно должно быть в базе данных) и в случае события afteredit сетки, возьмите это значение из хранилища комбинированного списка и скопируйте его в хранилище сетки.

Это даст лучшую производительность.

Answer 4

На самом деле проблема заключается в том, что сетка отображает значения в выпадающем списке ДО загрузки данных хранилища. Я нашел что-то здесь .

Но когда я применил переопределение, все та же проблема ... Вопрос я: как отложить рендеринг выпадающего списка, ожидая загрузки магазина?