javascript - 在 Sencha Touch 中同时多次使用同一 View

Question

我的问题如下:我有一个 View (例如: View A)，它将被另一个 View 使用(两次，但显示不同的数据。

View A:

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>'
        ]
    }
});

View B

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
        });
    }
});

问题在于它两次显示相同的数据。

我发现的解决方案创建了另一个继承自 view_A 的 View (例如 view_AA)，但我不确定这是最佳实践。

解决办法是什么？我做错了什么？

谢谢

塞巴斯蒂安

Answer 1

解决方案很简单，store 不应该定义在 viewA 中，所以它必须定义在 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
            }
        ]
    }
});

希望对大家有帮助!

塞巴斯蒂安