Extjs Ux.grid.plugin.AssociationRowExpander

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">
<script src="http://docs.sencha.com/extjs/4.1.3/extjs-build/ext-all-dev.js"></script>
<body>
<div id="hasManyGrid"><b>hasMany</b> association with an inner Ext.grid.Panel</div>
<div id="hasManyView"><b>hasMany</b> association with an inner Ext.view.View</div>
<div id="belongsTo"><b>belongsTo</b> association using an Ext.XTemplate</div>
</body>

CSS

body {
            padding : 50px;
        }
        .x-grid-rowbody-loading {
            background : url(loading.gif) no-repeat;
            height : 16px;
            padding-left : 20px;
        }
        #hasManyGrid {
            position : absolute;
            top : 50px;
            left : 50px;
        }
        #hasManyView {
            position : absolute;
            top : 50px;
            left : 700px;
        }
        #belongsTo {
            position : absolute;
            top : 400px;
            left : 50px;
        }
        #hasOne {
            position : absolute;
            top : 400px;
            left : 700px;
        }

JavaScript

Ext.require([
            'Ext.grid.Panel',
            'Ext.data.Store',            
            'Ext.data.writer.Writer', //bug in Ext JS 4.1.0 RC3, proxy should require this, bug already opened            
        ]);
            
//Ext.Loader.setPath('Ext.ux', 'http://docs.sencha.com/extjs/4.1.1/examples/ux'); 
Ext.Loader.setPath('Ext.ux', 'http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/ux/');
            
Ext.define('Ux.grid.plugin.AssociationRowExpander', {
    extend : 'Ext.ux.RowExpander',
    alias  : 'plugin.associationrowexpander',

    /**
     * @cfg {Ext.XTemplate/String/String[]} rowBodyTpl The template to use to render data.
     *
     * **NOTE** This is only valid for belongsTo associations
     *
     * Defaults to '&nbsp;'
     */
    rowBodyTpl : '&nbsp;',

    /**
     * @cfg {String} loadingMessage A HTML snippet to show while data is loading.
     *
     * Defaults to '<div class="x-grid-rowbody-loading">Loading...</div>'
     */
    loadingMessage : '<div class="x-grid-rowbody-loading">Loading...</div>',

    /**
     * @cfg {String} type The type of association. Possible values are 'hasMany', 'belongsTo', and 'hasOne'
     *
     * **NOTE** Only 'hasMany' and 'belongsTo' supported currently.
     *
     * Defaults to 'hasMany'
     */
    type : 'hasMany',

    /**
     * @cfg {String} getterName The name of the hasMany association getterName to call to retrieve the
     * {@link Ext.data.Store} for the associated records.
     *
     * Defaults to null
     */
    getterName : null,

    /**
     * @cfg {Object} gridConfig The configuration Object to create the inner {@link Ext.grid.Panel}
     *
     * Defaults to null
     */
    gridConfig : null,

    /**
     * @cfg {Object} viewConfig The configuration Object to create the inner {@link Ext.view.View}
     *
     * Defaults to null
     */
    viewConfig : null,

    /**
     * @cfg {String} bubbleEventPrefix The prefix for the events that will be bubbled.
     *
     *...