0

senchaを使用してタブパネルのタブをクリックするアクションを実装しようとしています。どういうわけか、タブをクリックしてもアラートを受け取ることができません。

これが私のコードです。ハンドラーとリスナーの両方のアプローチを異なるタブで使用しようとしましたが、いずれの方法でもアラートメッセージを受け取ることができません。

Int.views.bottomTabs = new Ext.TabPanel({

        dock: 'bottom',

        tabBar: {
        id:'bottomtab',
            dock: 'bottom',
            ui: 'dark',
            layout: {
                pack: 'center'
            }
        },

            defaults: {
                scroll: 'vertical',
                xtype: 'button'
            },


        items: [
        {
            title: 'Tab1',
        iconCls: 'und',
        handler: function(){
        alert('It is clicked');             

       },
        {
            title: 'Tab2',
            iconCls: 'und',
            listeners: {activate: update},
        },
        {
            title: 'Tab3',
        iconCls: 'und',

        },
        {
        title :'Tab4',
        iconCls: 'und',

         }
        ]
    });
    var update = function() {
    alert('tab2 is clicked');
    }

どこが間違っているのか教えてください。

ありがとうございました、

4

1 に答える 1

3

リスナーをアタッチする方法（インラインでアタッチする場合）は次のとおりです。

items : [
    {
        title     : 'Hello World',
        listeners : {
            activate : function() {
                alert('hello world');
            }
        }
    }, 
    {
        //...
    }
]

更新関数を呼び出して2番目の方法が機能しなかった理由は、Ext.TabPanelをインスタンス化した後に更新を宣言したためです。

関数をインラインで記述する代わりに参照する場合は、initComponent（）内でアイテムを定義し（より良い方法）、クラスを拡張する必要があります。

//..
onActivate    : function() {
    alert('hello world');
},
initComponent : function() { 
    this.items = [
        {
            title     : 'Hello World',
            listeners : {
                activate : this.onActivate
            }
        }, 
        {
            //...
        }
    ]
    // apply to superClass
}

SenchaTouchClassシステムをよく読んでください。あなたの場合、これはSenchaTouch1の方法になります。この一連のチュートリアルをご覧ください：http ：//www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-1/

于 2012-05-24T18:02:56.957 に答える