如何從自動完成中選擇項目後填充Ext.js 4網格面板單元格？

我有點不確定如何做到以下幾點：如何從自動完成中選擇項目後填充Ext.js 4網格面板單元格？

我有一個網格面板上的字段之一，我有一個自動完成和我的應用程序，這部分工作的罰款。

Autocomplete in gridpanel

我想這樣做是這樣的：在從自動完成列表中選擇一個項目，我會想填充與該項目相關的「描述」的數據，並在相應的單元格填充它。

例如，數據爲「3 PartNum」返回是：

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

一旦選擇我想「描述partnum 3」中的網格面板的「描述」單元進行更新。

現在，我有點困惑的是什麼是做到這一點的最佳方式。第一種方式似乎是這裏解釋的「DOM」模型How to read and set a value of a specific cell in an ExtJS Grid?。另一種方法似乎更像是「存儲」解決方案，例如Update or Reload Store of ExtJs ComboBox

所以我的問題是我應該使用哪種方法，爲什麼？特別是，我想知道在後端執行添加操作時最好的方式。

「存儲」方法的一些代碼適用於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 
}

}）;

商店是：

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

來源

2011-08-08 DavidS

請注意，您所提供的鏈接是爲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')); 
       } 
      } 
}

...你的代碼的其餘部分...

這是假設你可以得到自動完成使用該存儲，應該是相當容易，如果你沒有它現在的參考。

這應該讓你開始。

來源

2011-11-21 15:07:38 VoidMain

如何從自動完成中選擇項目後填充Ext.js 4網格面板單元格？

回答

相關問題