Lazy data associations in ExtJS 4

gist.js

Ext.require([
    'Ext.data.*',
    'Ext.panel.Panel',
    'Ext.layout.container.Card',
    'Ext.tip.QuickTipManager'
]);

Ext.define('Customer', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    }, 'name', 'phone'],
    associations: [{
        model: 'Order',
        type: 'hasMany',
        autoLoad: true
    }],
    proxy: {
        type: 'ajax',
        url: 'customer.php'
    }
});

Ext.define('Order', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'customer_id',
        type: 'int'
    },{
        name: 'date',
        type: 'date',
        dateFormat: 'Y-m-d'
    }],
    belongsTo: 'Customer',
    associations: [{
        model: 'OrderItem',
        type: 'hasMany',
        autoLoad: true
    }],
    proxy: {
        type: 'ajax',
        url: 'order.php'
    }
});

Ext.define('OrderItem', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'order_id',
        type: 'int'
    },'product', {
        name: 'quantity',
        type: 'int'
    }, {
        name: 'price',
        type: 'float'
    }],
    belongsTo: 'Order',
    proxy: {
        type: 'ajax',
        url: 'orderitem.php'
    }
});

Ext.define('CustomerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customergrid',

    title: 'Customers',

    initComponent: function(){
        Ext.apply(this, {
            store: {
                autoLoad: true,
                model: 'Customer',
                listeners: {
                    load: function() {
                        Logger.log('Customer store loaded', false);
                    }
                }
            },
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            },{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            dockedItems: [{
                xtype: 'toolbar',
                items: {
                    itemId: 'load',
                    text: 'Load Orders',
                    scope: this,
                    handler: this.loadOrders,
                    disabled: true
                }
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },

    onSelectChange: function(selModel, selections) {
        this.active = selections[0];
        this.down('#load').setDisabled(!this.active);
    },

    loadOrders: function(){
        var rec = this.active,
            name = rec.get('name'),
            owner = this.ownerCt,
            orders;


        orders = rec.orders();
        if (orders.isLoading()) {
            Logger.log('Begin loading orders: ' + rec.getId(), true);
        }
        orders.on('load', function(){
            Logger.log('Order store loaded - ' + rec.getId(), false);
        });
        owner.add({
            title: 'Orders - ' + rec.getId(),
            customer: rec,
            xtype: 'ordergrid',
            store: orders
        });
        owner.getLayout().next();
    }
});

Ext.define('OrderGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.ordergrid',

    initComponent: function(){
        Ext.apply(this, {
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            },{
                flex: 1,
                text: 'Date',
                dataIndex: 'date',
                renderer: Ext.util.Format.dateRenderer('Y-m-d')
            }],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Back',
                    scope: this,
                    handler: this.onBackClick
                },{
                    itemId: 'load',
                    text: 'Load Order Items',
                    scope: this,
                    handler: this.loadItems,
                    disabled: true
                }]
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },

    onBackClick: function(){
        this.ownerCt.getLayout().prev();
        this.destroy();
    },

    onSelectChange: function(selModel, selections) {
        this.active = selections[0];
        this.down('#load').setDisabled(!this.active);
    },

    loadItems: function(){
        var customerName = this.customer.get('name'),
            rec = this.active,
            date = Ext.Date.format(rec.get('date'), 'Y-m-d'),
            owner = this.ownerCt,
            orderitems;

        orderitems = rec.orderitems();
        if (orderitems.isLoading()) {
            Logger.log('Begin loading order items - ' + rec.getId(), true);
        }
        orderitems.on('load', function(){
            Logger.log('Order items loaded - ' + rec.getId(), false);
        });
        owner.add({
            title: 'Order Items - ' + rec.getId(),
            xtype: 'orderitemgrid',
            store: orderitems
        });
        owner.getLayout().next();
    }
});

Ext.define('OrderItemGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.orderitemgrid',

    initComponent: function(){
        Ext.apply(this, {
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            },{
                flex: 1,
                text: 'Product',
                dataIndex: 'product'
            }, {
                text: 'Quantity',
                dataIndex: 'quantity'
            }, {
                text: 'Price',
                dataIndex: 'price',
                renderer: Ext.util.Format.usMoney
            }],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Back',
                    scope: this,
                    handler: this.onBackClick
                }, {
                    itemId: 'load',
                    text: 'Parent association loader',
                    tooltip: 'Demonstrate loading parent relationships - A new record will be created so we ignore any previous associations setup',
                    scope: this,
                    handler: this.onLoadClick,
                    disabled: true
                }]
            }]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },

    onSelectChange: function(selModel, selections) {
        this.active = selections[0];
        this.down('#load').setDisabled(!this.active);
    },

    onBackClick: function(){
        this.ownerCt.getLayout().prev();
        this.destroy();
    },

    onLoadClick: function(){
        var rec = this.active,
            id = rec.getId();

        new ItemLoader({
            width: 400,
            height: 400,
            modal: true,
            title: this.title.replace('Order Items', 'Order Item ' + id),
            orderItemData: rec.data,
            orderItemId: id
        }).show();
    }
});

Ext.define('ItemLoader', {
    extend: 'Ext.window.Window',

    initComponent: function(){
        Ext.apply(this, {
            border: false,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Print order detail',
                    scope: this,
                    handler: this.onOrderClick
                }, {
                    itemId: 'company',
                    text: 'Print company detail',
                    disabled: true,
                    scope: this,
                    handler: this.onCompanyClick
                }]
            }],
            bodyPadding: 5,
            tpl: '<div>{type} {id} - {value}</div>',
            tplWriteMode: 'append'
        });
        this.callParent();
        this.orderItem = new OrderItem(this.orderItemData, this.orderItemId);
    },

    onOrderClick: function(){
        var id = this.orderItem.get('order_id'),
            hasOrder = !!this.order;

        if (!hasOrder) {
            Logger.log('Begin loading order - ' + id, true);
        }
        this.orderItem.getOrder({
            scope: this,
            success: function(order){
                this.order = order;
                this.down('#company').enable();
                if (!hasOrder) {
                    Logger.log('Order loaded - ' + id, false);
                }
                this.update({
                    type: 'Order',
                    id: order.getId(),
                    value: Ext.Date.format(order.get('date'), 'Y-m-d')
                });
            }
        });
    },

    onCompanyClick: function(){
        var id = this.order.get('customer_id'),
            hasCustomer = !!this.customer;

        if (!hasCustomer) {
            Logger.log('Begin loading customer - ' + id, true);
        }
        this.order.getCustomer({
            scope: this,
            success: function(customer){
                this.customer = customer;
                if (!hasCustomer) {
                    Logger.log('Customer loaded - ' + id, false);
                }
                this.update({
                    type: 'Customer',
                    id: customer.getId(),
                    value: customer.get('name')
                });
            }
        });
    }
});

Logger = (function(){
    var panel;

    return {
        init: function(log){
            panel = log;
        },

        log: function(msg, isStart){
            panel.update({
                now: new Date(),
                cls: isStart ? 'beforeload' : 'afterload',
                msg: msg
            });
            panel.body.scroll('b', 100000, true);
        }
    };
})();

Ext.onReady(function(){

    var main = Ext.create('Ext.panel.Panel', {
        renderTo: document.body,
        width: 750,
        height: 400,
        border: false,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            height: 200,
            xtype: 'container',
            layout: 'card',
            margin: '0 0 5 0'
        }, {
            flex: 1,
            title: 'Loader log',
            tplWriteMode: 'append',
            tpl: '<div class="{cls}">[{now:date("H:i:s")}] - {msg}</div>',
            bodyPadding: 5,
            autoScroll: true,
            listeners: {
                render: Logger.init
            }
        }]
    });
    Logger.log('Begin loading customer store', true);
    main.items.first().add({
        xtype: 'customergrid'
    });

});