在 ExtJS 4 中加载和保存嵌套数据 [英] Load and save nested data in ExtJS 4

问题描述

I have two models: Book belongsTo Author. Let's survey the author data sent together with book data on its way from server to ExtJs and back. Server sends following nested data to ExtJs:

{
  success : true,
  data: {
    id: '23',
    name: 'JavaScript - The definitive guide'
    author: {                                  // <<-- nested author data
        id: '45',
        name: 'David Flanagan',
    }
  }
}

On side of ExtJs the data are treated by following model:

Ext.define('My.models.Book', {
    extend: 'Ext.data.Model',
    idProperty: 'id',

    fields: [
        'id',, 
        'name',
        {name: 'author_id', mapping: 'Author.id'}, // <<-- flat author data
    ],

    proxy: {
        type: 'ajax',
        api: {
            read: 'My/Books/index',
            create: 'My/Books/create',
            update: 'My/Books/update',
            destroy: 'My/Books/delete'
        },
        reader: {
            type: 'json',
            root: 'data',
        },
        writer: {
            type: 'json',
            root: 'data',
        },
    },

    associatinons: [{
        type: 'belongsTo', 
        model: 'My.models.Author', 
        associationKey: 'Author', 
    }]    
});

Thanks to mapping Author.id on author_id field of Book model ({name: 'author_id', mapping: 'Author.id'}) I am able to load the data of author to following form designed to edit book data:

Ext.define('My.views.books.Form', {
    extend: 'Ext.form.Panel',
    initComponent: function () {
        var me = this;
        me.items = [{
            xtype: 'container',
            layout:'anchor',
            defaults:{
                anchor: '95%'
            },
            items:[{
                xtype: 'textfield',
                fieldLabel: 'Book title',
                name: 'name'
            },{
                xtype: 'combo',
                fieldLabel: 'Author',
                name: 'author_id',            // <<-- flat author data
                store: ...
            }]
        }];    
        me.buttons = [{
            text: 'Save',
            scope: me,
            handler: me.onSave
        }];
        me.callParent(arguments);
    },
    ...
});

Of course there is a model dedicated exclusively to author but when I need to load book and author data into one form at once, I do not see (for the moment) other possibility as the one shown above (Of course show me it, please, if there is some better solution).

The problem comes now: I will choose some other author from combo and I will save the form. As the book record get dirty (author_id appears now as a Book model field), there will be raised a request to 'My/Books/update' URL (this is quite ok, I'am editing book) with following data sent to server:

{
  data: {
    id: '23',
    name: 'JavaScript - The definitive guide',
    author_id: '78'              // <<-- flat author data
  }
}

Data coming back to server are not the in the same structure as they have been sent to ExtJs and must make some kind of translations like:

$data['Author']['id'] = @$data['author_id'];
unset($data['author_id']);

I am asking: Is it possible to treat data by ExtJs form in such a way that they will get back to server just in the same structure as they came from server? HOW?

This question was already somehow discussed here, here and here, but neither of those discussions answered it definitely.

Thank in advance for help! :)

解决方案

Short Answer: No, not yet.

Longer answer: You could create your own writer to handle your data structure and send it back to the server the same way as you received it.

You could either create your own writer by subclassing: http://docs.sencha.com/ext-js/4-2/#!/api/Ext.data.writer.Writer and use that in your proxy

or

You could create a function on your model that changes it's structure. Since you are not using stores you could create a function saveModel() where you change the model structure and call the save() method.

这篇关于在 ExtJS 4 中加载和保存嵌套数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！