在Sencha Touch 2中更改選項卡時發出Ajax請求

Question

我在sencha touch 2.4中工作，我想在具有標簽ID的指定標簽上進行ajax請求。 如何調用我的Ajax函數，或者只能通過按選項卡ID單擊指定的選項卡來獲得請求？ 我正在使用Ext.define定義我的程序包和應用程序視圖。

我的代碼：

config: {
        tabBarPosition: 'bottom',

        items: [

     {
                    id: 'tab',
                    title: 'Home',
                    iconCls: 'home',
                    styleHtmlContent: true,
                    scrollable: true,
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'MyTab'
                    }
                }
]
}

我的請求功能：

request: function() {
            Ext.Ajax.request({
            url: 'http://www.example.com'
            method: 'GET',
            callback: function(options, success, response) {
                Ext.ComponentQuery.query('#id')[0].setHtml( response.responseText );
            }
        });
    }

Answer 1

要檢測何時選擇了選項卡，您可以使用面板焦點事件來偵聽特定選項卡何時獲得焦點，或者可以聆聽選項卡面板上的activeitemchanged事件，該事件會在選擇選項卡時觸發。 下面的代碼示例：

Ext.create('Ext.TabPanel', {
        fullscreen: true,
        tabBarPosition: 'bottom',

        defaults: {
            styleHtmlContent: true
        },

        items: [{
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        }, {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }],
        listeners: {
            activeitemchange: function() {
                console.log('active item changed');
            }
        }
    });

要實現這一點，你可以使用Ext.create像我上面也可以使用Ext.define定義組件，並與創建方法后初始化。