Question

我有ListView用户列表。我的控制器在用户点击上有事件监听器打开新视图（TabView），我想在TabView容器模板中显示有关用户的详细信息，但它没有显示任何内容。

控制器：

Ext.define('HockeyTeamManagementSystem.controller.Users', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        UserList: 'userlist',
        Users: 'users',
        UserDetails: 'userdetailtabs'
    },

    control: {
        "#UserList": {
            itemtap: 'onListItemTap'
        },
        "tabpanel": {
            initialize: 'onTabpanelInitialize'
        }
    }
},

onListItemTap: function(dataview, index, target, record, e, eOpts) {
    var user = Ext.create("HockeyTeamManagementSystem.view.UserDetailTabs", {
        title: record.data.name +" "+ record.data.lastname,
        record: record
    });
    this.getUsers().push(user).setData(record.data);
},

TabView的：

Ext.define('HockeyTeamManagementSystem.view.UserDetailTabs', {
extend: 'Ext.tab.Panel',
alias: 'widget.userdetailtabs',

requires: [
    'Ext.tab.Bar',
    'Ext.XTemplate'
],

config: {
    activeItem: 1,
    defaults: {
        styleHtmlContent: false
    },
    tabBar: {
        docked: 'bottom',
        layout: {
            type: 'hbox',
            pack: 'center'
        }
    },
    items: [
        {
            xtype: 'container',
            title: 'Information',
            iconCls: 'info',
            tpl: [
                'name: {name}'
            ]
        },
        {
            xtype: 'container',
            title: 'Statistics',
            iconCls: 'star'
        },
        {
            xtype: 'container',
            title: 'Payments',
            iconCls: 'compose'
        }
    ]
}
});

Answer 1

您需要在容器中设置数据，而不是在视图中设置数据。

{
            xtype: 'container',
            title: 'Information',
            iconCls: 'info',
            name: "info",
            tpl: [
                'name: {name}'
            ]
}

在控制器中： -

refs: {
   infoContainer: 'container[name="info"]'
}

现在设置数据： -

onListItemTap: function(dataview, index, target, record, e, eOpts) {
    var user = Ext.create("HockeyTeamManagementSystem.view.UserDetailTabs", {
        title: record.data.name +" "+ record.data.lastname,
        record: record
    });
    this.getUsers().push(user);
    this.getInfoContainer().setData(record.data);
}

Answer 2

好吧，经过几个小时的测试后，我意识到我只需要将数据从onListItemTap设置为TabView项目：

refs: {
    UserInformationTab: '#UserInformationTab'
},

onListItemTap: function(dataview, index, target, record, e, eOpts) {
    var user = Ext.create("HockeyTeamManagementSystem.view.UserDetailTabs", {
        title: record.data.name +" "+ record.data.lastname,
        record: record
    });
    this.getUsers().push(user);
    this.getUserInformationTab().setData(record.data);
}

将ListView中的数据传递给TabView Sencha Touch

2 个答案: