Question

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

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

控制器

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

解决方案是什么？我做错了什么？

由于

塞巴斯蒂安

Answer 1

解决方案非常简单，不应在viewA中定义商店，必须在视图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
            }
        ]
    }
});

希望对大家有所帮助！

塞巴斯蒂安

在Sencha Touch中同时使用相同的视图几次

1 个答案: