Extjs4 редактор сетки удаленного выпадающего списка - PullRequest
Новая
       31

Extjs4 редактор сетки удаленного выпадающего списка

4 голосов
/ 16 декабря 2011

У меня есть сетка с некоторыми столбцами для редактирования.Один из столбцов должен редактироваться через выпадающий список.Хранилище комбинированного списка является удаленным и имеет тип пары ключ-значение: 

['id', 'title']

Поле со списком valueField является идентификатором, а displayValue является заголовком.При редактировании ячейки мой комбинированный список загружает хранилище, выбирается displayValue и значение valueField возвращается в редактор сетки.Таким образом, ячейка заполняется значением valueField.

Мой вопрос: как получить ячейку для отображения displayValue?Просто выбрать его в магазине недостаточно, поскольку рендеринг происходит до загрузки магазина.Мой код на данный момент (работает только с локальными магазинами): 

{
    header: 'Column title',
    dataIndex: 'id',
    displayField: 'title',
    editor: {
        xtype: 'combo',
        valueField: 'id',
        store: 'myStore',
        displayField: 'title'
    },
    renderer: function(value) {
        //How do I find the editors combobox store?
        store = new myStore();
        index = store.findExact('id', value);
        if (index != -1) {
            rs = store.getAt(index).data;
            return rs.title;
        }
        return value;
    }
}

Ответы [ 4 ]

3 голосов
/ 19 декабря 2011

Вот как я это сделал:

У меня есть 2 хранилища, storeA для сетки и storeB для выбранного значения (как описано выше).Оба магазина имеют идентификатор от storeB.

В итоге я добавил поле для storeA - название для storeB ID.И в сетке у меня есть этот заголовок как скрытый столбец.И в столбце редактора выпадающего списка я использую этот рендер: 

  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       //Title is the title for the storeB ID
       return store.data.items[rowIndex].data.title;
  }

В сетке у меня есть прослушиватель для события редактирования, чтобы обновить столбец, содержащий заголовок с заголовком из выпадающего списка: 

  grid.on('edit', function(editor, e, eOpts ) {
       grid.store.data.items[e.rowIdx].set('title', editor.editors.items[0].field.rawValue)
  })

Надеюсь, это поможет кому-то еще!

2 голосов
/ 26 июня 2012

В определениях вашей модели, какой тип идентификатора.Если вы определили как 'int', вы должны: 

index = store.findExact('id', parseInt(value));
0 голосов
/ 28 августа 2013

Вот ответ, перенесите комбинированный магазин в область вашего рендерера:

http://jsfiddle.net/WRXcw/3/

Ext.define('GridModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'type_id',
        type: 'int'
    }]
});

Ext.define('ComboModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'label',
        type: 'string'
    }],
    statics: {
        TYPE_OPTION_ONE:   1,
        TYPE_OPTION_TWO:   2,
        TYPE_OPTION_THREE: 3,
        TYPE_OPTION_FOUR:  4
    }
});

var comboStore = Ext.create('Ext.data.Store', {
    model: 'ComboModel',
    data: [{
        id: 1,
        label: '1st Option'
    },{
        id: 2,
        label: '2nd Option'
    },{
        id: 3,
        label: '3rd Option'
    }]
});

var gridStore = Ext.create('Ext.data.Store', {
    model: 'GridModel',
    data: [{
        id: 1,
        type_id: ComboModel.TYPE_OPTION_ONE
    },{
        id: 2,
        type_id: ComboModel.TYPE_OPTION_TWO
    },{
        id: 3,
        type_id: ComboModel.TYPE_OPTION_THREE
    },{
        id: 4,
        type_id: ComboModel.TYPE_OPTION_TWO
    }]
});

Ext.widget('grid', {
    title: 'Rendering Combos',
    width: 650,
    height: 500,
    renderTo: 'ct',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    store: gridStore,
    forceFit: true,
    columns: [{
        dataIndex: 'id',
        header: 'ID'
    },{
        dataIndex: 'type_id',
        header: 'Type',
        editor: {
            xtype: 'combobox',
            displayField: 'label',
            valueField: 'id',
            queryMode: 'local',
            store: comboStore,
            allowBlank: true
        },
        renderer: function(value) {
            var rec = comboStore.getById(value);

            if (rec)
            {
                return rec.get('label');
            }

            return '—';
        }
    }]
});
0 голосов
/ 17 декабря 2011

Значение - не единственный параметр, передаваемый в средство визуализации, см. Документацию: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer

значение : Объект 

The data value for the current cell
**metaData** : Object

A collection of metadata about the current cell;

может использоваться или изменяться средством визуализации. Распознаются следующие свойства: tdCls, tdAttr, и стиль. 

**record** : Ext.data.Model

The record for the current row
**rowIndex** : Number

The index of the current row
**colIndex** : Number

The index of the current column
**store** : Ext.data.Store

The data store
**view** : Ext.view.View

The current view
...