Use same view several times simultaneously in Sencha Touch

Question

My problem is the following: I have a view (for example: view A), which it will be used by another view ( twice, but showing different data.

ViewA:

Ext.define('view_A', {
    extend: 'Ext.DataView',
    xtype: 'view_A',


    config: {
        store: 'Children',
        baseCls: 'facesGrid',
        itemTpl: [
            '<div class="image" style="background-image:url({Picture})"></div>',
            '<div class="name">{PrivateName} {shortFamilyName}.</div>'
        ]
    }
});

ViewB

Ext.define('view_B', {
    extend: 'Ext.Container',


    config: {
        layout: 'vbox',
        cls: 'messageDetails',
        items: [
            {
                xtype: 'view_A',
                itemId: 'students',
                flex: 1
            },
            {
                xtype: 'view_A',
                itemId: 'teachers',
                flex: 1
            }
        ]
    }
});

Controller

Ext.define('myController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            view_B: 'view_B'
        },


        control: {
            view_B: {
                activate: 'onActivateCard'
            }
        }
    },

    onActivateCard: function () {
        var viewB = this.getView_B();

        Ext.getStore('storeA').load({
            callback: function (records, operation, success) {
                viewB.getComponent('students').setData(records);
            },
            scope: this
        });

        Ext.getStore('storeB').load({
            callback: function (records, operation, success) {
                viewB.getComponent('teachers').setData(records);
            },
            scope: this
        });
    }
});

The problem is that it's showing the same data twice.

The solution I found create another view (for example view_AA) inheriting from view_A, but I'm not sure it's the best practice.

What is the solution? What am I doing wrong?

Thanks

Sebastian

Answer 1

The solution is very easy, the store should not be defined in viewA, son it must be defined in view B.

Ext.define('view_A', {
    extend: 'Ext.DataView',
    xtype: 'view_A',


    config: {
        //store: 'Children', <--- REMOVE FROM HERE!!!
        baseCls: 'facesGrid',
        itemTpl: [
            '<div class="image" style="background-image:url({Picture})"></div>',
            '<div class="name">{PrivateName} {shortFamilyName}.</div>'
        ]
    }
});

Ext.define('view_B', {
    extend: 'Ext.Container',


    config: {
        layout: 'vbox',
        cls: 'messageDetails',
        items: [
            {
                xtype: 'view_A',
                itemId: 'students',
                store: 'storeA', //<--- THE STORE IS DEFINED HERE
                flex: 1
            },
            {
                xtype: 'view_A',
                itemId: 'teachers',
                store: 'storeB', //<--- THE STORE IS DEFINED HERE
                flex: 1
            }
        ]
    }
});

Hope this help to everyone!

Sebastian