Mobile Sencha Touch 2：如何在列表项点击时创建/显示新视图

我有一个动态填充的列表，我想创建一个新视图，然后通过点击项目上的按钮动态显示它（在选项卡视图中），但我认为我没有正确地进行操作，我如何才能正确地实现这一点

    Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'MyApp',
    launch: function () {

        Ext.Viewport.add({
            xclass: 'MyApp.view.Main'
        });

    }
});

Ext.define('MyApp.view.Main', {
    extend: 'Ext.TabPanel',
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',

        defaults: {
            styleHtmlContent: true
        },
        items: [
            {xtype:'schedulecard'},
            {xtype: 'settingscard'}
        ]
    }

});

var scheduleItems = Ext.create('Ext.data.Store', {
    storeId: 'schedulestore',
    fields: ['name', 'day'],
    sorters: 'day',
    grouper: {
        groupFn: function (record) {
            return record.get('day')[0];
        }
    },

    data: [
     { name: 'Cowper', day: 'Monday' },
     { name: 'Everett', day: 'Monday' },
     { name: 'University', day: 'Tuesday' },
     { name: 'Forest', day: 'Tuesday' }
    ]
}); // create()

Ext.define('MyApp.view.Schedule', {
    extend: 'Ext.List',
    xtype: 'schedulecard',
    grouped: true,
    config: {
        title: 'Schedule',
        iconCls: 'settings',
        store: 'schedulestore',
        itemTpl: '<span style="font-weight:bold;">{name}</span> {day}',
        listeners: {
            itemtap: function (list, index, item, evt) {
                **//In here is where I wish to to display new View**
            }
        },
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'MyApp'
        }]
    }
});

scheduleItems.add({ name: 'test', day: 'Wednesday' });
scheduleItems.add({ name: 'test', day: 'Wednesday' });
scheduleItems.add({ name: 'test', day: 'Wednesday' });
scheduleItems.add({ name: 'test', day: 'Wednesday' });
scheduleItems.add({ name: 'test', day: 'Thursday' });
scheduleItems.add({ name: 'test', day: 'Thursday' });
scheduleItems.add({ name: 'test', day: 'Thursday' });
scheduleItems.add({ name: 'test', day: 'Friday' });
scheduleItems.add({ name: 'test', day: 'Friday' });

Ext.define('MyApp.view.Settings', {
    extend: 'Ext.Panel',
    xtype: 'settingscard',
    config: {
        title: 'Settings',
        iconCls: 'settings',
        html: 'Settings new',
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'MyApp',
            items: [
                {
                    align: 'left',
                    text: 'Back'
                },
                {
                    align: 'right',
                    text: 'refresh'
                }
            ]
        }]
    }
});

Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
名称：“MyApp”，
启动：函数（）{
Ext.Viewport.add({
xclass:'MyApp.view.Main'
});
}
});
Ext.define（'MyApp.view.Main'{
扩展：“Ext.TabPanel”，
配置：{
全屏：对，
tabBarPosition:'底部'，
默认值：{
styleHtmlContent：true
},
项目：[
{xtype:'schedulecard'}，
{xtype:'settingscard'}
]
}
});
var scheduleItems=Ext.create（'Ext.data.Store'{
storeId:“schedulestore”，
字段：['name'，'day']，
分拣员：“一天”，
石斑鱼：{
groupFn：函数（记录）{
返回记录。获取（'day'）[0]；
}
},
数据：[
{姓名：'Cowper'，日期：'Monday'}，
{姓名：'Everett'，日期：'Monday'}，
{名称：'大学'，日期：'星期二'}，
{名称：'森林'，日期：'星期二'}
]
}); // 创建（）
Ext.define（'MyApp.view.Schedule'{
扩展：“Ext.List”，
xtype:'时间表卡'，
对,，
配置：{
标题：‘附表’，
iconCls:“设置”，
存储：“schedulestore”，
itemTpl:“{name}{day}”，
听众：{
itemtap：函数（列表、索引、项、evt）{
**//这里是我希望显示新视图的地方**
}
},
项目：[{
xtype:'标题栏'，
停靠：“顶部”，
标题：“MyApp”
}]
}
});
添加（{name:'测试'，day:'星期三'}）；
添加（{name:'测试'，day:'星期三'}）；
添加（{name:'测试'，day:'星期三'}）；
添加（{name:'测试'，day:'星期三'}）；
添加（{name:'test'，day:'striday'}）；
添加（{name:'test'，day:'striday'}）；
添加（{name:'test'，day:'striday'}）；
添加（{name:'test'，day:'Friday'}）；
添加（{name:'test'，day:'Friday'}）；
Ext.define（'MyApp.view.Settings'{
扩展：“Ext.Panel”，
xtype:“settingscard”，
配置：{
标题：“设置”，
iconCls:“设置”，
html:“新设置”，
项目：[{
xtype:'标题栏'，
停靠：“顶部”，
标题：“MyApp”，
项目：[
{
对齐：“左”，
文本：“返回”
},
{
对齐：“右”，
文本：“刷新”
}
]
}]
}
});

这取决于您想要创建什么，但假设您想要创建一个浮动面板，您可以这样做：

itemtap: function(list, index, item, e) {
    var panel = Ext.create('Ext.Panel', {
        floating: true,
        centered: true,
        width: 200,
        height: 200,
        html: 'Hello world!'
    });

    Ext.Viewport.add(panel);
    panel.show();
}

---

这取决于您想要创建什么，但假设您想要创建一个浮动面板，您可以这样做：

itemtap: function(list, index, item, e) {
    var panel = Ext.create('Ext.Panel', {
        floating: true,
        centered: true,
        width: 200,
        height: 200,
        html: 'Hello world!'
    });

    Ext.Viewport.add(panel);
    panel.show();
}

---

我尝试在侦听器下添加这段代码，但没有发生任何事情。抱歉，我遗漏了一行，您必须首先将面板添加到视口中。我尝试在侦听器下添加这段代码，但没有发生任何事情。抱歉，我遗漏了一行，您必须首先将面板添加到视口中。