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 视图，但这不是我想要的。 我是否必须向按钮添加事件侦听器或者我必须做其他事情请建议

我在控制器文件夹 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.setPath({ 'Ext': '触摸/src', 'ov_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

您可以将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 
     });
}

---

编辑

您需要将control 放入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'});
}

这是基于您发布的所有代码的 Working Demo。

Answer 2

在按钮上，您必须添加这样的处理程序：

{
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() 以显示窗口。但是你可以在那里做任何动作。