Как заполнить ячейку панели сетки Ext.js 4 после выбора элемента из автозаполнения? - PullRequest
Новая
       38

Как заполнить ячейку панели сетки Ext.js 4 после выбора элемента из автозаполнения?

3 голосов
/ 08 августа 2011

Я немного не уверен, как сделать следующее:

У меня есть панель сетки, и в одном из полей у меня есть автозаполнение, и эта часть моего приложения работает нормально.

Autocomplete in gridpanel

Я бы хотел сделать следующее: После выбора элемента из списка автозаполнения я хотел бы заполнить данные «Описание», связанные с этим элементом, и заполнить их в соответствующей ячейке.

Например, данные, возвращаемые для "PartNum 3": 

{"PartNum":"PartNum 3","Description":"Description partnum 3"}

После выбора я бы хотел, чтобы «Description partnum 3» обновлялось в ячейке «Описание» панели сетки.

Теперь, что меня немного смущает, так это лучший способ сделать это. Первый способ - это модель "DOM", как описано здесь Как прочитать и установить значение определенной ячейки в сетке ExtJS? . Похоже, что другой метод - это скорее решение «Store», например Обновление или перезагрузка магазина ExtJs ComboBox

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

Будет приветствоваться также некоторый код для метода «Store» в применении к Gridpanel и автозаполнению.

Что касается текущего кода, вот моя модель: 

Ext.define('CustomerOrderLineGrid.model.COLInventoryPart', {
extend: 'Ext.data.Model'
, fields: ['Id', 'PartNum', 'Description']
, proxy: {
    type: 'ajax'
    , api: {
        read: '../InventoryPart/InventoryPartListAutoComplete'
          }
    //        , url: 'someUrl'
    , extraParams:
    {
        total: 50000
    }
    , reader: {
        type: 'json'
        , root: 'InventoryParts'
        , successProperty: 'success'
        , totalProperty: 'total'
    }
    , simpleSortMode: true
}

}); * 1 028 *

В магазине есть: 

Ext.define('CustomerOrderLineGrid.store.COLInventoryParts', {
extend: 'Ext.data.Store',
model: 'CustomerOrderLineGrid.model.COLInventoryPart',
autoLoad: false
, pageSize: 200
, remoteSort: true
, remoteFilter: true
, buffered: true
, sorters: [{
    property: 'PartNum'
    , direction: 'ASC'
}]
* +1032 *});

и часть вида: 

, editor: {
                xtype: 'combo'
                , store: 'COLInventoryParts'
                , displayField: 'PartNum'
                , typeAhead: true
                , width: 320
                , hideTrigger: true
                , minChars: 2
                , listeners:
                {
                    select: function (f, r, i) {
                       // CODE TO INSERT TO POPULATE DESCRIPTION FIELD
                    }
                }
            }

1 Ответ

1 голос
/ 21 ноября 2011

Обратите внимание, что предоставленные вами ссылки относятся к и вы используете

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

... определение вашей сетки ... 

listeners: {
    edit: function(editor, e) {
              if(e.field === 'PartNum') {
                  //NOTE: You need a reference to the autocomplete store for this to work
                  var rec = store.findRecord('PartNum', e.value);
                  e.record.set('Description', rec.get('Description'));
              }
          }
}

... остальная часть вашего кода ...

Это предполагает, что вы можете получить ссылку на магазин, который использует автозаполнение, что должно быть довольно просто, если у вас его сейчас нет.

Это должно помочь вам начать.

...