オブジェクト値のCelleditor Extjs4

Question

私はこれを行うには最適なソリューションを探しています。私が持っているもの ：私はセルにdoublecickとき

// model 
Ext.define("User", { 
    extend: "Ext.data.Model", 
    fields: [ 
     {name: "id", type: "int"}, 
     {name: "name"}, 
     {name: "description", type: "string"} 
    ] 
}); 
// store with data 
var oStore = new Ext.data.Store({ 
    model: "User", 
    data: [ 
     {id: 1, name: {name:"John"}, description: "Fapfapfap"}, 
     {id: 2, name: {name:"Danny"}, description: "Boobooboo"}, 
     {id: 3, name: {name: "Tom"}, description: "Tralala"}, 
     {id: 4, name: {name:"Jane"}, description: "Ololo"}, 
    ] 
}); 
// and finally I have a grid panel 
Ext.create("Ext.grid.Panel", { 
    columns: [ 
     {dataIndex: "id", header:"ID"}, 
     { 
      dataIndex: "name", 
      header: "Name", 
      renderer: function(value){return value.name;}, 
      editor: "textfield"}, 
     {dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"} 
    ], 
    plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})], 
    store: store, 
    renderTo: document.body 
});​ 

私は、エディタのフィールドに[object] Objectを見て、私は、グリッド内の空のセルを参照してくださいよりも、有効な値を入力するとき。

質問：どうすればcelleditorをrecord.nameからではなく、record.name.nameからデータを取得するように設定できますか？

Answer 1

あなたはモデルのgetとsetメソッドをオーバーライドすることができますので、マルチレベルのフィールド名をサポートします。以下は実装例です。

Ext.define("User", { 
    extend: "Ext.data.Model", 
    fields: [ 
     {name: "id", type: "int"}, 
     {name: "name"}, 
     {name: "description", type: "string"} 
    ], 
    get: function(key) { 
     if (Ext.isString(key) && key.indexOf('.') !== -1) { 
      var parts = key.split('.'); 
      var result = this.callParent([ parts[0] ]); 
      return result[parts[1]]; 
     } 
     return this.callParent(arguments); 
    }, 
    set: function(key, value) { 
     if (Ext.isString(key) && key.indexOf('.') !== -1) { 
      var parts = key.split('.'); 
      var result = this.get(parts[0]); 
      result[parts[1]] = value; 

      this.callParent([ parts[0], result ]); 
      return; 
     } 
     this.callParent(arguments); 
    } 
}); 

ストアでname.nameフィールドの変更が検出されたかどうかわかりません。いいえの場合は、おそらくレコードをダーティとマークする必要があります。

ワーキングサンプル：http://jsfiddle.net/lolo/dHhbR/2/

Answer 2

エディタは、列の "dataIndex"フィールドに指定されている値を受け入れます。 "名前"はオブジェクトなので、それはあなたが得ているものです。エディタに名前を入力すると、valueは文字列（オブジェクトではない）に等しくなり、レンダラは文字列のnameプロパティを取得しようとしています。

これを修正する最も簡単な方法は、ストアの「名前」フィールドをオブジェクトではなく文字列にすることです。しかし、私はあなたがこのようにしたい理由があると仮定しています。

CellEditingプラグインには、beforeedit、edit、およびvalidateeditの3つのイベントが待機できます。 beforeeditリスナを実装して、カラムから「name」オブジェクトを取得し、そのオブジェクトの「name」プロパティを取得し、その値でエディタを埋めることができます。次にvalidateeditで、エディタから値を取得し、その値を持つレコードの "name"オブジェクトの "name"プロパティを設定します。クイックリファレンスについては

は、ここではイベントの定義です：CellEditing events

Answer 3

簡単な方法は異なり、「名前」プロパティをマップするために、あなたのユーザーモデルオブジェクトを変更することです：

{name: "name", mapping:'name.name'} 

その後、他のすべては同じまま。