sencha-touch-2 - Sencha のタブ項目クリックのリスナー

Question

私のアプリケーションでは、5 つの項目を含むタブ パネルを使用しています。各アイテムには、カード レイアウトに追加された約 6 枚のパネルが含まれます。タブ項目内の最後のパネルにいるときは、一番下のタブ パネルをクリックして最初のパネルに戻る必要があります (iOS の通常のタブ ビュー コントローラーに似ています)。ここで見つけたいくつかの解決策に出くわしましたが、タブを切り替えた場合にのみ機能するようです。実際、同じタブ アイコンでクリック イベントをリッスンしたいと考えています。これどうやってするの？

Answer 1

私はあなたの問題に取り組みました。これはまさにあなたが望むものだと思います。お役に立てれば。そうでない場合は、コメントを残してください。

1)。ビュー (MyTabPanel1.js)

    Ext.define('MyApp.view.MyTabPanel1', {
    extend: 'Ext.tab.Panel',
    config: {

            scrollable: 'vertical',
             items:
            [
                {
                   xtype: 'panel',
                   id:'cardpanel1',
                   title: 'Tab1',              
                   layout: 'card',
                        items: [
                            {  
                                html: "First Item",
                                items:
                                [
                                {
                                    xtype: 'button',
                                    text: 'Forward',
                                    handler: function() {
                                    Ext.getCmp('cardpanel1').setActiveItem(1);
                                    console.log('Going to Second Item');
                                    }
                                }
                                ]
                            },
                            {
                                html: "Second Item",
                                items:
                                [
                                {
                                    xtype: 'button',
                                    ui: 'confirm',
                                    text: 'Go back',
                                    handler: function() {
                                    Ext.getCmp('cardpanel1').setActiveItem(0);
                                    console.log('Going to First Item');
                                    }
                                }
                                ]
                            }

                        ]               

                },

                {
                    xtype: 'panel',
                    title: 'Tab2',
                    scrollable: true,
                    items: [
                        {
                            xtype: 'button',
                            margin: 10,
                            ui: 'action',
                            text: 'Tab2'
                        }

                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Tab3',
                    scrollable: true,
                    items: [
                        {
                            xtype: 'button',
                            margin: 10,
                            ui: 'action',
                            text: 'Tab3'
                        }
                    ]
                }

            ]
        }

    });

2)。コントローラー (MainController.js)

    Ext.define('MyApp.controller.MainController', {
        extend: 'Ext.app.Controller',
        config: {
            control: {

                "tabpanel #ext-tab-1":{  //ext-tab-1 is the id for the 1st tab generated by Sencha
                   tap: 'ontap'
                }            
            }
        },

        ontap: function (){
        console.log('inside controller');
        Ext.getCmp('cardpanel1').setActiveItem(0);
        }

    });

Answer 2

私ははるかに簡単な解決策を提供します

これは、TabPanel である Viewport と呼ばれる私のビューです。

Ext.define('Sencha.view.iphone.Viewport',{
           extend: 'Ext.TabPanel',
           xtype: 'newviewport',
           alias: 'widget.newTabPanel',

今私のコントローラファイルで：

    Ext.define('Sencha.controller.iphone.main', {
        extend: 'Ext.app.Controller',
        config:
        {
        refs: {
        theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
        },
        control: {
        theMainTabPanelTabbarTab:{
        tap: 'onTapMainTabPanel'
        }
}

これは動作するコードであり、正常に動作します。うまくいけば、これはあなたを助けるでしょう.