illustrating nested loading

ExtJS 4 nested loading

Ext.regModel('Product', {
    idProperty: 'id',
    successProperty: 'meta.success',
    fields: [
        'id',
        "name",
        'company'
    ],
    hasMany: {model:'Review', name: 'reviews', associationKey: 'reviews'}
});

Ext.regModel('Review', {
   idProperty: 'id',
    fields: [
            'id',
            'product_id',
            'comment',
            'author'
    ],
    belongsTo:'Product'
});

Ext.define('ProductStore', {
    extend: 'Ext.data.JsonStore',
    constructor: function (config) {
        var me = this;
        config = config || {};
        config.autoLoad = false;
        config.batch = false;
        config.model = 'Product';
        config.proxy = {
            type: 'ajax',
            url :  '/ProductReview/product-json.wso/RetrieveProduct/JSON/',
            reader: {
                type: 'json',
                root: 'product'
            }
        };
        ProductStore.superclass.constructor.call(this, config);
    }});

Ext.define('ReviewStore', {
    extend: 'Ext.data.JsonStore',
    constructor: function (config) {
        config.autoLoad = false;
        config.fields = ["author", "comment"];
        ReviewStore.superclass.constructor.call(this, config);
    }
})

Ext.define("ReviewGrid", {
    extend: "Ext.grid.GridPanel",
    constructor: function (config) {
        config = config || {};
        config.autoLoad= false;
        config.store= Ext.create("ReviewStore", {});
        config.tbar = [
            {xtype: 'button'},
        {
            text: 'add'
        }
        ];
        config.columns = [
            {text: "author", dataIndex:"author"},
            {text: "comment", dataIndex:"comment"}
        ];
        config.width= 540;
        config.height = 200;
        ReviewGrid.superclass.constructor.call(this, config);
    }
})

Ext.define("ProductForm", {
    extend: "Ext.form.FormPanel",
    store: Ext.create("ProductStore", {}),

    constructor: function (config) {
        var me = this;

        config = config||{};
        config.tite = 'ProductReview';
        config.width = 400;
        config.tbar = [
            {
                xtype: 'button',
                text: 'previous',
                id: 'productPreviousButton',
                handler: function () {
                    me.store.proxy.extraParams["ProductIdentifier"] = me.store.proxy.extraParams["ProductIdentifier"] - 1;
                    me.navigate();
                }
            },
            {
                xtype: 'button',
                text: 'next',
                id: 'productNextButton',
                handler: function () {
                    me.store.proxy.extraParams["ProductIdentifier"] = me.store.proxy.extraParams["ProductIdentifier"] + 1;
                    me.navigate();
                }
            }
        ];
        config.items =
                [
                    {
                        xtype: 'hidden',
                        name: 'id',
                        id: 'productid'
                    },
                    {
                        xtype: 'textfield',
                        name: 'company',
                        id: 'company',
                        fieldLabel: 'company name'
                    },
                    {
                        xtype: 'textfield',
                        name: 'name',
                        id: 'name',
                        fieldLabel: 'product name',
                        allowBlank: false
                    }
                ];
        ProductForm.superclass.constructor.call(this, config);

        this.store.proxy.extraParams["ProductIdentifier"] = 1;
        this.navigate();
    },

    navigate: function () {
        var me = this;
        me.store.load({
            callback: function (a,b,c) {
                me.getForm().loadRecord(me.store.first());
                var reviews = [];
                var product = me.store.first();
                product.reviews().each(function (review) {
                    reviews.push(review.data);
                })
                me.reviewGrid.store.loadData(reviews);
            }
        });
    }
});