3

I am a bit uncertain about how to do the following:

I've got a grid panel and on one of the fields, I've got an autocomplete and this part of my application is working fine.

Autocomplete in gridpanel

What I would like to do is this: Upon selecting an item from the autocomplete list, I will like to populate the "Description" data associated with that item and populate it in the appropriate cell.

For instance , the data returned for "PartNum 3" is:

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

Upon selection I'd like "Description partnum 3" to be updated in the "Description" cell of the grid panel.

Now, what I'm a bit confused about is what is the best way to do this. The first way seems to be a "DOM" model as explained here How to read and set a value of a specific cell in an ExtJS Grid?. The other method appears to be more of "Store" solution e.g. Update or Reload Store of ExtJs ComboBox

So my question is which method should I be using and why? In particular, I would like to know what the best way would be when performing an add operation in the backend.

Some code for the "Store" method as it applies to the Gridpanel and autocomplete would be very welcome as well.

As far as the current code is concerned, here is my model:

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
}

});

The store is:

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'
}]

});

and part of the view is:

, 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
                    }
                }
            }
Community
  • 1
  • 1
DavidS
  • 2,179
  • 4
  • 26
  • 44

1 Answers1

1

Note that the links you provided are for and you're using

I think your best option is to listen for the edit event on the grid and, if the edit was on the autoComplete column then set the value on the description one, that would be something like this:

... definition of you grid ...

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

... rest of your code ...

This assumes that you can get a reference to the store the autocomplete is using, that should be fairly easy if you don't have it now.

This should get you started.

VoidMain
  • 1,987
  • 20
  • 22