ExtJS grid combo renderer не работает

Question

У меня есть сетка в приложении ExtJS 4.2.1, которое имеет редактируемый столбец с комбинированным редактором.

мне нужно сделать столбец со значением из DisplayField в комбо, но comboStore.getCount() = 0

Вот моя сетка:

Ext.define('App.employee.Grid', { 
    extend: 'Ext.grid.Panel', 
    requires: ['Ext.grid.plugin.CellEditing'], 
    alias: 'widget.employee.grid', 

    config: { 
     LocationId: 0 
    }, 

    initComponent: function() { 

     var me = this, 
      store = me.buildStore(), 
      comboStore = Ext.create('App.store.catalog.Location', { autoLoad: true }); 

     me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      listeners: { 
       edit: function(editor, e) { 

       } 
      } 
     }); 

     me.cellEditing = new Ext.grid.plugin.CellEditing({ 
      clicksToEdit: 1 
     }); 


     Ext.applyIf(me, { 
      plugins: [me.rowEditing], 
      columns: [{ 
       xtype: 'rownumberer', 
       text: '#', 
       width: 50, 
       sortable: false, 
       align: 'center' 
       //locked: true 
      },{ 
       text: 'Number', 
       dataIndex: 'EmployeeNumber', 
       align: 'center', 
       width: 90 
      }, { 
       text: 'Name', 
       dataIndex: 'EmployeeName', 
       flex: 1 
      }, { 
       text: 'Location', 
       dataIndex: 'LocationId', 
       width: 140, 
       renderer: function(value) { 

        // HERE!!! 
        // me.comboStore.getCount() = 0 so I never get a record 

        var record = me.comboStore.findRecord('LocationId', value); 
        return record.get('Description'); 
       }, 
       editor: { 
        xtype: 'combobox', 
        typeAhead: true, 
        triggerAction: 'all', 
        store: comboStore, 
        displayField: 'Description', 
        valueField: 'LocationId', 
        queryMode: 'local', 
        listConfig: { 
         width: 250, 
         // Custom rendering template for each item 
         getInnerTpl: function() { 
          return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)'; 
         } 
        } 
       } 
      }], 

      store: store, 

     }); 


     me.callParent(arguments); 
    } 

}); 

Проблема заключается в функции renderer потому что comboStore всегда пусто. Странно то, что на мой взгляд. Если я нажму, чтобы отредактировать строку и открыть комбо, у комбо есть значения.

[UPDATE]

То, что я думаю, что мой comboStore имеет задержку при загрузке так визуализатор обжигают до загрузки comboStore. Я это понимаю, потому что, если я отлаживаю хром, и я жду несколько секунд, тогда он работает ... но не знаю, как заставить ждать, пока загрузится комбо-магазин.

Любая подсказка о том, как это решить? Цените любую помощь.

Answer 1

Несколько решений:

1. Убедитесь, что комбинированный магазин загружен до магазина сетки. Это можно сделать, загрузив сначала комбо, а из события загрузки его магазина запускает загрузку хранилища сетки. Недостатком является то, что он добавляет ненужную задержку, поэтому этот метод нарушает работу пользователя.
2. Загрузите все необходимые магазины, в том числе с одного запроса. Это требует немного кодирования, но это экономит серверный ход, так что это очень ценный подход. Метод store loadData используется для фактического загрузки хранилища с полученными данными. Вы, конечно, сначала назовете это на комбо, а затем на сетке.
3. Лучший метод, который я использую почти исключительно, состоит в том, чтобы перевернуть все это вверх ногами и отобразить поле отображения в хранилище, а не в поле значений. Сервер должен возвращать как отображение, так и поля значений в хранилище сетки, и требуется небольшой фрагмент кода, который обновляет оба поля в хранилище сетки после завершения редактирования. Этот метод продемонстрирован здесь: Remote Combo in ExtJS Grid