sencha在按钮的选项卡上显示不同的视图

Question

我在sencha touch 2中创建了一个索引页面，在其中我在容器内创建了一些自定义按钮

Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
requires:[
    'ov_app.view.Eligibelity',
],
xtype: 'main',
css:[{
            "path": "default-theme.css",
    }],
config:{
    scrollable: true,
    items: [
        {           xtype: 'panel',
                    margin:10,
                    items:[
                        {
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                            style:'background-color:#000',
                            action: 'push-view',
                        },{
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                        },{
                            xtype:'button',
                            cls:"main_navigation",
                        }
                    ]
           }]
    }
});

这些按钮看起来像这个

单击橙色按钮后，我想显示一个新视图。

我尝试了ext.Navigation view，但它不是我想要的。我必须在按钮上添加一个事件监听器，还是我必须做一些其他事情请建议

我在controller文件夹main.js中创建了一个新控制器

Ext.define('ov_app.controller.Main', {
extend: 'Ext.app.Controller',
    config:{
        control: {
            'button[action=push-view]': {
                tap: 'pushViewFunction'
            }
        },
    },

pushViewFunction: function() {
    Ext.Viewport.add({
        xtype: 'Eligibelity' 
    });
}
});

还有我的新视图Eligibelity.js代码

`
Ext.define('ov_app.view.Eligibelity', {
    xtype : 'Eligibelity',

    config: {
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'title',
                title: 'Twitter Search'
            }
        ]
    }
    });

还有我的app.js密码

'Ext.loader.set路径（{'Ext'：'touch/src'，'ov_app'：'app'}）；

    Ext.application({
        name: 'ov_app',

        requires: [
        'Ext.MessageBox'
    ],

views: ['Main', 'Eligibelity'],
controllers: ['Main'],

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version.     Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
});

`

Answer 1

在按钮上，必须添加如下处理程序：

{
xtype:'button',
cls:"main_navigation",
handler: function() {
        Ext.create( 'Ext.window.Window', {
           title: 'Works',
           height: 300,
           width: 300,
           html: 'Create whatever view you want.'
        } ).show();
    }
}

您想在单击按钮时创建什么视图？

编辑：添加show（）以显示窗口。但你可以在那里做任何动作。

Answer 2

您可以添加一个action到您的按钮以供参考：

{
    xtype: 'button',
    action: 'push-view'
}

然后，在控制器中，当用户点击按钮时，您可以按下“新建视图”，如下所示：

control: {
   'button[action=push-view]': {
        tap: 'pushViewFunction'
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

编辑

你需要把你的控件放在config块中：

config: {    
    control: {
       'button[action=push-view]': {
            tap: 'pushViewFunction'
        }
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

编辑2：

您可以使用setActiveItem或animateActiveItem：

 pushViewFunction: function() {
    Ext.Viewport.animateActiveItem({xtype: 'Eligibelity'}, {type:'slide', direction: 'left'});
}

以下是基于您所有发布代码的工作演示。