sencha display different view on tab of a button

Question

I have created a index page in sencha touch 2 in which I have created some custom buttons inside the container

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

thees buttons looks something like this

on click of orange button i want to display a new view.

i have tried ext.Navigation view but it's not what i want. Do i have to add a event listener to the button or i have to do something else pleas suggest

I have created a new controller in controller folder 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' 
    });
}
});

and my new view Eligibelity.js code

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

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

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

` And also my app.js code

` Ext.Loader.setPath({ '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

You can add an action to your button for reference:

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

Then in your controller, you can push new view when user tap the button like this:

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

---

EDIT

You need to put your control inside config block:

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

---

EDIT 2:

You can use setActiveItem or animateActiveItem:

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

Here is the Working Demo based on your all posted code.

Answer 2

On a button you must add a handler like that:

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

What view do you want to create on a button click?

Edit: add show() to show the window. But you can do any action in there.