sencha-touch - sencha touch コンポーネントをクリックすると異なるカードレイアウトを表示する方法は?

Question

私は sencha touch でアプリケーションを作成しており、ビューの main.js が次のようになるカード レイアウトを作成したいと考えています。

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 hae は私の app.js コードです

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

コンソールに ov_app.container.setActiveItem(1) と入力すると、目的のカード レイアウトが表示されますが、コンポーネントをクリックするとどうすればそれを実行できますか? そのコンポーネントのハンドラーで何かを宣言し、そのタブイベントのコントローラーを宣言する必要がありますか?

編集 1

タップイベントを適用したいmain_navigation.jsコード

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

`

html:"tap me" でコンテナをチェックアウト そのコンテナのタブにカードレイアウトを表示したい