从自动完成中选择项目后如何填充 Ext.js 4 网格面板单元格？

Posted 2023-02-26

【中文标题】从自动完成中选择项目后如何填充 Ext.js 4 网格面板单元格？

【英文标题】：How to populate Ext.js 4 grid panel cell after selecting item from autocomplete?

【发布时间】：2011-08-08 09:12:06

【问题描述】：

我有点不确定如何执行以下操作：

我有一个网格面板，在其中一个字段上，我有一个自动完成功能，我的应用程序的这一部分工作正常。

我想做的是： 从自动完成列表中选择一个项目后，我想填充与该项目关联的“描述”数据并将其填充到相应的单元格中。

例如，“PartNum 3”返回的数据是：

"PartNum":"PartNum 3","Description":"Description partnum 3"

选择后，我希望在网格面板的“描述”单元格中更新“描述部分 3”。

现在，我有点困惑的是，最好的方法是什么。第一种方法似乎是这里How to read and set a value of a specific cell in an ExtJS Grid? 解释的“DOM”模型。另一种方法似乎更像是“存储”解决方案，例如Update or Reload Store of ExtJs ComboBox

所以我的问题是我应该使用哪种方法，为什么？特别是，我想知道在后端执行添加操作时最好的方法是什么。

适用于 Gridpanel 和自动完成的“Store”方法的一些代码也非常受欢迎。

就目前的代码而言，这是我的模型：

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

);

商店是：

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

);

部分视图是：

, 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】：

请注意，您提供的链接是针对 extjs 的，而您使用的是 extjs4

我认为您最好的选择是在网格上侦听编辑事件，如果编辑在自动完成列上，则在描述一列上设置值，这将是这样的：

...你的网格定义...

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

...其余代码...

这假设您可以获得对自动完成正在使用的商店的引用，如果您现在没有它应该相当容易。

这应该让你开始。