sencha touch how to display different card layout on click on a component?

Question

I am creating an application in sencha touch and I want to create a card layout for that my view main.js looks something like this

Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
css:[{
            "path": "default-theme.css",
    }],
    config: {
    layout:{
        type: 'card'
    },
    items: [
        {
            layout:'vbox',
            items:[
                {
                    xtype: 'HeaderBar',
                },{
                    xtype: 'home_button',
                    flex:1
                },{
                    xtype: 'main_navigation',
                    flex:1
                },{
                    xtype:'FooterBar',
                }
            ]
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }

        ],
}
});`

ok hare is my app.js code

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'ov_app': 'app'
});
//</debug>

Ext.application({
name: 'ov_app',

requires: [
    'Ext.MessageBox'
],
profiles: ['Phone', 'Tablet', 'Desktop'],
views: ['Main', 'Eligibelity', 'HeaderBar', 'ListNavigation', 'FooterBar',    'home_button', 'main_navigation'],
stores: ['NavigationItems'],
models: ['Items'],

controllers: ['MainController'],
icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

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

    // Initialize the main view
    ov_app.container = Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},
onUpdated: function() {
    /*
       'onUpdated' is triggered after the following cases happen:
        - Your application's HTML 5 manifest file (cache.manifest) changes. 
        - You have changes in any of your JavaScript or CSS assets listed in
        the "js" and "css" config inside app.json. 
    */
    Ext.Msg.confirm(
        "Update",
        "Reload now?",
        function() {
            window.location.reload();
        }
    );
}
});`

ok now when i enter ov_app.container.setActiveItem(1) in my console it shows me the desired card layout but how can i do it on click of a component? Do i have to declare something in handler of that component and declare a controller for that tab event.

Edit 1

The main_navigation.js code whare i want to apply the tap event

Ext.define('ov_app.view.main_navigation', {
xtype:'main_navigation',
extend:'Ext.Container',
requires:[
    'Ext.Img',
],
config:{
    layout:'vbox',
    defaults:{
    cls:"main_navigation",                          
            margin: '0 10 8 10',
            border: 0,
            flex:1,
    },
    items:[
        {
            xtype:'container',
            items:[{
                xtype:'container',
                html: 'tab me',
                centered: true,
                cls: 'main_navigation_heading',
               listeners:[{
                           tap:function(){
                               tap event listner function defination }
                         }]
            },{
                xtype: 'image',
                src: 'resources/images/visa.png'
            }]
        }
    ]
}
});

`

check out the container with html:"tap me" I want to display card layout on tab of that container

Answer 1

You can do like this:

{
    xtype:'container',
    items:[{
        xtype:'container',
        html: 'tab me',
        centered: true,
        cls: 'main_navigation_heading',
        listeners: {
            initialize: function(c) {
                this.element.on({
                    tap: function(e, node, options) {
                        alert("Working!")
                    }
                })
            }
        }
    }]

}