如何使用CellEditing插件在網格內顯示組合框中的屬性並在ExtJS 4.2中保存完整的JSON 4.2

Question

我想從單元編輯的網格內的組合框中的服務器接收到的JSON顯示屬性。當用戶選擇一個選項時，我想顯示相同的屬性，但是當用戶保存網格時，我希望將完整的JSON發送到服務器（不僅僅是顯示值或ID字段）。

這是我迄今爲止（點擊此處下載http://jsfiddle.net/apater39/do0xg4r1/）：

Ext.define('NS.model.State', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
    name: 'id', 
    type: 'int' 
    }, { 
    name: 'name', 
    type: 'string' 
    }] 
}); 
Ext.define('NS.store.State', { 
    extend: 'Ext.data.Store', 
    model: 'NS.model.State', 
    data: [{ 
    "id": 1, 
    "name": "Alabama" 
    }, { 
    "id": 2, 
    "name": "Alaska" 
    }, { 
    "id": 3, 
    "name": "Arizona" 
    }] 
}); 

Ext.define('NS.model.Person', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
    name: 'id', 
    type: 'int' 
    }, { 
    name: 'firstName', 
    type: 'string' 
    }, { 
    name: 'state', 
    type: 'NS.model.State' 
    }] 
}); 

Ext.define('NS.store.Grid', { 
    extend: 'Ext.data.Store', 
    model: 'NS.model.Person', 
    data: { 
    'items': [{ 
     'id': 1, 
     "firstName": "Lisa", 
     "state": null 
    }, { 
     'id': 2, 
     "firstName": "Bart", 
     "state": null 
    }, { 
     'id': 3, 
     "firstName": "Homer", 
     "state": null 
    }, { 
     'id': 4, 
     "firstName": "Marge", 
     "state": null 
    }] 
    }, 
    proxy: { 
    type: 'memory', 
    reader: { 
     type: 'json', 
     root: 'items' 
    } 
    } 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.create('NS.store.Grid'), 
    columns: [{ 
    header: 'First Name', 
    dataIndex: 'firstName', 
    flex: 1, 
    editor: 'textfield' 
    }, { 
    header: 'State', 
    dataIndex: 'state', 
    flex: 1, 
    editor: { 
     xtype: 'combobox', 
     store: Ext.create('NS.store.State'), 
     queryMode: 'local', 
     displayField: 'name', 
     valueField: 'id' 
    } 
    }], 
    selType: 'cellmodel', 
    plugins: [{ 
    ptype: 'cellediting', 
    clicksToEdit: 2 
    }], 
    height: 150, 
    width: 200, 
    renderTo: Ext.getBody() 
}); 

如果我使用valueField「身份證」，那麼當用戶從顯示的ID組合框（而不是displayField選擇一個選項）。

，我想發送的JSON是這樣的：

{ 
    "id": 1, 
    "firstName": "Lisa", 
    "state": 
    { 
    "id": 1, 
    "name": "Alabama" 
    } 
} 

感謝您的幫助。

更新：根據豪爾赫·拉蒙的建議

，我來到了一個解決方案（見http://jsfiddle.net/apater39/8opsqg5s/）。重要的是要聽取cellediting pluging的編輯事件，然後找到選定的組合記錄並設置相應的屬性。

var gridPanel = Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: gridStore, 
    columns: [{ 
    header: 'First Name', 
    dataIndex: 'firstName', 
    flex: 1, 
    editor: 'textfield' 
    }, { 
    header: 'State', 
    dataIndex: 'state', 
    flex: 1, 
    editor: { 
     xtype: 'combobox', 
     store: Ext.create('NS.store.State'), 
     displayField: 'name', 
     valueField: 'name', 
     editable: false, 
     queryMode: 'local', 
     forceSelection: true, 
     triggerAction: 'all', 
     selectOnFocus: true, 
     allowBlank: false 
    }, 
    renderer: function(value) { 
     return value.name; 
    } 
    }], 
    selType: 'cellmodel', 
    plugins: [{ 
    ptype: 'cellediting', 
    clicksToEdit: 2, 
    listeners: { 
     edit: function(editor, ctx, eOpts) { 
     var vendorColIdx = 1; 
     if (vendorColIdx === ctx.colIdx) { 
      var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record); 
      var vendorRecord = combo.findRecord('name', ctx.record.get('state')); 
      ctx.record.set('state', vendorRecord.data); 
     } 
     ctx.grid.getStore().sync(); 
     } 
    } 
    }], 
    height: 250, 
    width: 200, 
    renderTo: Ext.getBody() 
}); 

的JSON發送變爲：

{"id":1,"firstName":"Lisa","state":{"id":2,"name":"Alaska"}} 

Answer 1

你需要改變一些東西，在你的代碼來實現想要你想做的事......

首先是，你正在努力協會工作（人員包含一個國家），但你沒有宣佈該協會。 要正確申報的關聯性，我建議閱讀：https://stackoverflow.com/a/16492938/3494608 而且也深深建議閱讀：後來http://extjs-tutorials.blogspot.fr/2012/05/extjs-hasmany-relationships-rules.html

，你需要了解如何正確設置你的關聯，因爲你的組合框在這裏只設置一個值（對應於選擇狀態的模型的id）而不是記錄本身。

然後，你會看到如何發送完整的模型與關聯。我沒有在Ext4.2中自己做過，但你會在google上找到一些演講（關鍵詞：extjs保存嵌套模型）。 發現這個第一：https://www.sencha.com/forum/showthread.php?274778-Add-new-record-of-Model-that-contains-nested-Model

我沒有一個「全合一」的解決方案，因爲與協會的工作是不幸的ExtJS的一個工作，雖然（少用ExtJS的5+但仍...）

祝你好運！

Answer 2

你想擁有組合編輯器中設置這樣的例子：

editor: { 
    xtype: 'combobox', 
    store: 'Vendors', 
    displayField: 'name', 
    valueField: 'name', 
    editable: false, 
    queryMode: 'remote', 
    forceSelection: true, 
    triggerAction: 'all', 
    selectOnFocus: true, 
    allowBlank: false 
} 

然後，使用CellEditor的插件：

plugins: { 
    ptype: 'cellediting', 
    clicksToEdit: 1, 
    listeners: { 
     edit: 'onGridEditorEdit' 
    } 
} 

和處理插件的編輯事件：

onGridEditorEdit: function (editor, ctx, eOpts) { 
    var vendorColIdx = 2; 
    if (vendorColIdx === ctx.colIdx + 1) { 
     var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record); 
     var vendorRecord = combo.findRecord('name', ctx.record.get('vendorName')); 
     ctx.record.set('vendorId', vendorRecord.get('id')); 
    } 
    ctx.grid.getStore().sync(); // Force a post with the updated data.  
}