Поиск по этому блогу

вторник, 27 сентября 2011 г.

ExtJs Вставляем combobox в grid

Краткая инструкция по применению

//  Создаем хранилище
var storeSPR = new Ext.data.JsonStore({   
    autoDestroy: true,
    url: 'get-data.php', // backend, отвечающий за загрузку данных
    storeId: 'StoreSPR',   
    root: 'tablerow',
    idProperty: 'KOD',
    fields: ['KOD', 'NAME']
});

// Создаем renderer, который можно будет использовать с любым combobox'ом (как и рек. в help'e)
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}
// Сам combobox
var pfr_edit = new Ext.form.ComboBox({
  typeAhead: true,
  triggerAction: 'all', 
  store: storeSPR,
  displayField:'NAME', // поле, которое отображается
  valueField: 'KOD',   // поле, которое редактируется (FK)
  lazyRender: true
});

// Теперь связать его с нашей моделью колонок
var cm = new Ext.grid.ColumnModel({
...
,{ header: 'Имя', dataIndex: 'KOD', width: 300,           
        renderer: Ext.util.Format.comboRenderer(pfr_edit), // вместо кода будет отображаться имя
          editor: pfr_edit // наш combo box редактор
            }
...

грузим store
storeSPR.load();

Серверная часть (get-data.php), отвечающая за загрузку combo box'a, должна ответить нам примерно такой строкой
{"success":"true","tablerow":[
{"KOD":"029","NAME":"Имя 1"},
{"KOD":"013","NAME":"Имя 2"}]}