グリッドウィジェット列 - ウィジェット変更時、グリッドストアの更新方法

Question

グリッド列にコンボボックスと日付フィールドを表示する必要があります。そのため、widgetcolumnを使用し、これらのフィールドを持つグリッドを作成しました。

しかし、コンボボックスや日付フィールドのデータを変更する場合、グリッドストアで新しい値を更新して、次のページに戻って戻った後に値を前のページに残す必要があります。

私はこれをどのように達成できるか教えていただけますか？

フィドル：https://fiddle.sencha.com/#fiddle/183r

Answer 1

オプション1：ウィジェットとセルエディタの両方を使用してください。

CellEditingプラグインを追加し、エディタをウィジェットと同じコンポーネントに設定します。

{ xtype: 'widgetcolumn', text: 'Gender', dataIndex: 'gender', flex: 1, 
        widget: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'}, 
        editor: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'} 
}, 

例：https://fiddle.sencha.com/#fiddle/1843

オプション2：手動でレコードを更新します。

私はこの解決策が優れていると感じています。

widget: {xtype: 'datefield', 
      listeners:{ 
       select: function(datefield, value, eOpts){ 
        var rowIndex = datefield.up('gridview').indexOf(datefield.el.up('table')); 
        var record = datefield.up('gridview').getStore().getAt(rowIndex); 
        record.set('dob', value); 
       } 
      } 
     } 

例：​​

がwidgetColumnでrowIndexプロパティを取得するために、私は"How to get rowIndex in extjs widget column" DrakeES's answerを参照。

Answer 2

最高の解決策が見つかりました。 "getWidgetRecord"関数は検索では見つかりません。 これはウィジェット設定の記述内に記述されています。 以下のリンクをご覧ください。

http://docs.sencha.com/extjs/5.1.3/Ext.grid.column.Widget.html#cfg-widgethttp://docs.sencha.com/extjs/6.0.2-classic/Ext.grid.column.Widget.html#cfg-widget

XTYPEを含む設定オブジェクト。

これは、この列のセルにレンダリングされるウィジェットまたはコンポーネントを作成するために使用されます。

この列のdataIndexは、ウィジェット/コンポーネントのdefaultBindPropertyの更新に使用されます。

ウィジェットは2つのメソッドで装飾されます：getWidgetRecord - ウィジェットが関連付けられているExt.data.Modelを返します。 getWidgetColumn - ウィジェットが関連付けられたExt.grid.column.Widgetを返します。

widget:{ 
    xtype:'combo', 
    editable: false, 
    store: Ext.create('Ext.data.Store',{ 
     fields:['name','text'], 
     data:[ 
      {"name":"integer", "text":"Integer"}, 
      {"name":"float","text":"Float"} 
     ] 
    }), 
    listeners:{ 
     select: function(combo, value, eOpts){ 
      var record = combo.getWidgetRecord(); 
      record.set('type', value.get('name')); 
     } 
    }, 
    valueField:'name', 
    displayField:'text', 
    allowBlank: false 
} 

または

widget: { 
    xtype: 'textfield', 
    allowBlank: false, 
    listeners:{ 
     change: function(textfield, value, eOpts){ 
      var record = textfield.getWidgetRecord(); 
      record.set('field', value); 
     } 
    } 
}