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

Posted 2023-02-26

【中文标题】在 Sencha Touch 2 中更改选项卡时发出 Ajax 请求

【英文标题】：Make an Ajax request on tab change in Sencha Touch 2

【发布时间】：2015-01-16 10:26:41

【问题描述】：

我在 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 );
            
        );
    

【参考方案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 方法对其进行初始化。

【讨论】：

我已经更新了答案，对此感到抱歉。调查为什么这不起作用

我想使用 Ext.define 而不是 Ext.application。

对不起，我忘了这是针对 ST2 的，我指的是 ExtJs 解决方案。我已经重新写了答案。您可以使用任何方法来初始化您喜欢的代码。我刚刚使用它来运行一个快速示例。

仍然没有监听事件，我正在使用 Ext.define。

好的，我已经完成了这个解决方案，我将监听器放在 items 数组中。