How to reuse content with Sencha Touch - stackoverflow question

gistfile1.txt

/*
    Code for question on stackoverflow - http://stackoverflow.com/questions/9432309/how-to-reuse-content-with-sencha-touch
    Expanding on a SenchaFiddle contributed by rdougan. 

*/
Ext.Loader.setConfig({ enabled: true });


var topStore = Ext.create('Ext.data.Store', {
    //give the store some fields
    fields: [
        {name: "title",         type: "string"},
        {name: "img",           type: "string"},
    ],

    //filter the data using the firstName field
    sorters: 'title',

    data: [
        { title: 'top 1', img: 'pix.png' },
        { title: 'top 2', img: 'pix.png' },
        { title: 'top 3', img: 'pix.png' },
        { title: 'top 4', img: 'pix.png' },
        { title: 'top 5', img: 'pix.png' },
        { title: 'top 6', img: 'pix.png' }
    ]
});

var bottomStore = Ext.create('Ext.data.Store', {
    //give the store some fields
    fields: [
        {name: "title",         type: "string"},
        {name: "img",           type: "string"},
    ],

    //filter the data using the firstName field
    sorters: 'title',

    data: [
        { title: 'bottom 1', img: 'pix.png' },
        { title: 'bottom 2', img: 'pix.png' },
        { title: 'bottom 3', img: 'pix.png' },
        { title: 'bottom 4', img: 'pix.png' },
        { title: 'bottom 5', img: 'pix.png' },
        { title: 'bottom 6', img: 'pix.png' }
    ]
});

Ext.define('OrangeContainer', {
    extend: 'Ext.Container',
    xtype: 'orangeContainer',

    config: {
        store: null,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },

        items: [
            {
                html : ['<h1>Another one</h1>',].join("")
            },
            {
                itemId: 'orangeList',
                xtype:  'orangeList',
                scrollable:  'vertical',
                height: 980
            }
        ]
        
    },


    applyStore: function(value) {
      this.items.items[1].injectStore(value);
    },


    
    
});


/*
According to the official doc, you are supposed to be able to specify an itemRenderer. 
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/ and updated demo code at: https://github.com/senchalabs/component-dataview-example/blob/master/app/view/KittensListItem.js
*/

Ext.define('OrangeList', {
    extend: 'Ext.DataView',
    xtype: 'orangeList',

    requires: [
        'Ext.data.Store'
    ],

    config: {
        storex: null,
        itemTpl: '<h1>{title}</h1><img src="{img}" alt=""/>'
    },
    
    injectStore: function(value) {
        this.setStore(value);
    },


});



Ext.application({
    name: 'SenchaFiddle',
    
    viewport: {
        // Give the viewport a layout of vbox
        layout: 'vbox'
    },
    launch: function() {
        // Each vertical item to Ext.Viewport
        Ext.Viewport.add([
            // Top
            {
                // flex the item
                flex: 1,
                layout: 'fit',
                margin: 10,
                items: [
                    {
                        html: 'top left',
                        style: 'background: #eee'
                    },
                    {
                        docked: 'right',
                        html: '2 right',
                        width: 150,
                        margin: '0 0 0 10',
                        style: 'background: #ddd'
                    },
                    {
                        docked: 'right',
                        xtype: 'orangeContainer',
                        store: topStore,
                        width: 150,
                        margin: '0 0 0 10',
                        style: 'background: #eee'
                    }
                ]
            },
            
            // Bottom
            {
                flex: 1,
                layout: 'fit',
                margin: '0 10 10 10',
                items: [
                    {
                        xtype: 'list',
                        itemTpl: '{text}',
                        store: {
                            fields: ['text'],
                            data: [
                                { text: 'this' },
                                { text: 'is' },
                                { text: 'a' },
                                { text: 'list' },
                                { text: 'of' },
                                { text: 'many' },
                                { text: 'items' }
                            ]
                        },
                        style: 'background: #eee'
                    },
                    {
                        docked: 'right',
                        html: '2 right',
                        width: 150,
                        margin: '0 0 0 10',
                        style: 'background: #ddd'
                    },
                    {
                        docked: 'right',
                        xtype: 'orangeContainer',
                        store: bottomStore,
                        width: 150,
                        margin: '0 0 0 10',
                        style: 'background: #eee'
                    }
                ]
            }
        ]);
    }
});