Question

I’m looking for a best solution how to do this.
What I have:

// 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
});​

When I doublecick on a cell I see [object] Object in editor’s field, and when I enter valid value than I see empty cell in the grid.

So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?

Answer 1

You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.

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

I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.

Working sample: http://jsfiddle.net/lolo/dHhbR/2/