ExtJS4.2: How can I add an array of objects into another object.

I am using model association in ExtJS4.2. I need to use hasMany to associate the Shelf with Books. This is how my json structure has to be as per the requirement.

Code:

{    "name": "Jam",
    "noOfBooksRequired": "2",
    "type": "Type 1",
    "books": [
        {"name": "The Magic", "author": "John Doe"},
        {"name": "The Power", "author": "Jane Doe"}
    ]
}

Here is my Shelf model:

Code:

Ext.define('ELM.model.Shelf',{    extend: 'Ext.data.Model',
    requires: ['ELM.model.Book'],
    fields: [
             { name: 'name',type:'string' },
             { name: 'noOfBooksRequired',type: 'string' },
             { name: 'type',type: 'string' },
            ],
             hasMany: [
                       {
                           name: 'books',
                           associationKey: 'books',
                           model: 'ELM.model.Book'
                       }
                       ]
});

and the proxy is given in Shelf store like this:

Code:

proxy: {
     type: 'ajax',
     url: 'ShelfServlet',
     reader:{
          type: 'json',
          root: 'data'
        }
}

This is the book Model:

Code:

Ext.define('ELM.model.Book',{
    extend: 'Ext.data.Model',
    fields: [
             { name: 'bookName',type:'string' },
             { name: 'bookAuthor',type:'string' },
             ]
});

Now, I am not sure how I have to accept this book data in the Shelf form.I am able to pass this data into the servlet but the data is not in the required format. Here is my json structure that I currently have:

Code:

{
    "name": "Jam",
    "noOfBooksRequired": "2",
    "type": "Type 1",
    "bookName": [  "The Magic","The Power"  ],
   "bookAuthor":[  "John Dae","John Doe"  ]
}

And this is how I have coded the Shelf form: Shelf.js

Code:

Ext.define('ELM.view.Shelf.Edit',{    
    extend : 'Ext.form.Panel',
    requires : [ 'ELM.view.shelf.Book' ],
    alias : 'widget.shelf',
    id : 'shelf',
    layout : 'fit',
    autoShow : true,
    items : [{
        xtype : 'form',id : 'shelfdetails',
        items : [ {
            xtype : 'fieldset',
            title : 'Shelf Details',
            defaults : {
                layout : {
                    type : 'hbox',
                    defaultMargins : {top : 0,right : 25,bottom : 0,left : 0 }
                }
            },
            items : [ 
                      {fieldLabel : 'Name :',xtype : 'textfield',name : 'name'}, 
                      {fieldLabel : 'Number Of Books Required',xtype : 'combo',
                          name : 'noOfBooksRequired',id : 'noOfBooksRequired',
                          store : new Ext.data.SimpleStore({
                          fields : [ 'no', 'val' ],
                          data : [ [ '1', '1' ], [ '2', '2' ], [ '3', '3' ] ]
                }),
                displayField : 'no',valueField : 'val',
                listeners : {
                    select : function(combo, value) {
                        var dynamicPanel = Ext.getCmp("dynamicPanel");
                        var bookField = {
                            xtype : 'fieldset',title : 'Book Details',
                            defaults : {
                                layout : {
                                    type : 'hbox',
                                    defaultMargins : {top : 0,right : 25,bottom : 0,left : 0 }
                                }
                            },
                        items : [ { xtype : 'textfield',fieldLabel : 'Book Name',name : 'bookName'}, 
                                   {xtype : 'textfield',fieldLabel : 'Book Author',name : 'bookAuthor'} ]
                        };
                        dynamicPanel.removeAll(true);
                        for ( var i = 0; i < combo.getValue(); i++) {
                            var index = dynamicPanel.items.length;
                            dynamicPanel.insert(index, bookField);
                            dynamicPanel.doLayout();
                        }
                    }
                }
            }, {
                fieldLabel : 'Type',xtype : 'combo',
                name : 'type',
                store : Ext.create('Ext.data.SimpleStore', {
                    fields : [ 'typeCode', 'typeName' ],
                    data : [ [ '1', 'type 1' ], [ '2', 'type 2' ] ]
                }),
                displayField : 'typeName',valueField : 'typeCode',
            } ]
        }, {
            xtype : 'panel',
            id : 'dynamicPanel',
            items : []
        } ]
    } ],




    buttons : [ {
        text : 'Save',
        action : 'formSave'
    } ]




});

I have a few more questions here considering the code above

• When defining the model, can I use Book as a type in Shelf.js ( to make it more clear,can I have a Book Object within the Shelf Object)?


• What is the difference between Ext.data.SimpleStore and Ext.data.Store? because when I tried changing SimpleStore to Store It did not work.


• I also want to display the json received in a window. Should I make any changes to the form other than using form.loadRecord(record) to display it?


• What is the major difference between ajax and rest proxies. What I have understood about that is, in case of rest proxy..the CRUD operations will be mapped to POST,GET,PUT,DELETE methods and the Url will be automatically updated.

Since I am new to ExtJS and actually finding it difficult to understand few concepts. It will be really helpful for me to understand the concept if anyone can tell a little more about it.

Thanks in advance

ExtJS4.2: How can I add an array of objects into another object.