オートコンプリートから項目を選択した後、Ext.js 4グリッドパネルセルを取り込む方法は？

Question

私は次のようにする方法について少し不明です：

グリッドパネルがあり、フィールドの1つにオートコンプリートがあり、アプリケーションのこの部分が正常に動作しています。

私は何をしたいのはこれです：自動補完リストから項目を選択すると 、私はその項目に関連付けられている「説明」データを移入し、適切な細胞でそれを埋めるために好きになるでしょう。例えば

、データは「PARTNUM 3」のために返されます。

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

選択すると、私はグリッドパネルの「説明」は、細胞内で更新される「説明PARTNUM 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 
        } 
       } 
      } 

Answer 1

注意あなたが提供するリンクがextjsのためであり、あなたがextjs4

を使用していることを私はあなたの最良のオプションは、上の編集イベントをリッスンすることだと思いますグリッドが表示され、編集がautoCompleteカラムにあった場合は、説明の値を次のように設定します。

...グリッドの定義...

あなたのコードの

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

...残り...

これは、あなたが今それを持っていない場合はかなり簡単なはずオートコンプリートを使用している店舗への参照を、得ることができることを前提としています。

これはあなたの作業を開始するはずです。