Question

我有一个动态填充的列表，我想创建一个新视图，然后通过项目上的按钮点击它（在选项卡视图中）显示它但我认为我不会它正确，我怎样才能正确实现这个？

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

Answer 1

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

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

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

1 个答案: