在 Sencha Touch 中同时使用同一个视图数次答案

【问题标题】：Use same view several times simultaneously in Sencha Touch在 Sencha Touch 中同时使用同一个视图数次
【发布时间】：2014-04-11 21:00:32
【问题描述】：

我的问题如下：我有一个视图（例如：视图 A），它将被另一个视图使用（两次，但显示不同的数据。

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

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

控制器

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_AA），但我不确定这是不是最佳做法。

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

谢谢

塞巴斯蒂安

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题

标签： javascript extjs touch

【解决方案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
            }
        ]
    }
});

希望对大家有所帮助！

塞巴斯蒂安

【讨论】：