在 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 来定义组件并稍后使用 create 方法对其进行初始化。

在 Sencha Touch 2 中对选项卡更改发出 Ajax 请求

Make an Ajax request on tab change in Sencha Touch 2

javascript

ajax

jquery

extjs

sencha-touch