senchatouch tabPanel 在面板跳转时执行自定义函数 handler（）

最新推荐文章于 2019-03-29 13:20:16 发布

原创最新推荐文章于 2019-03-29 13:20:16 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sencha #touch #tab #panel

SenchaTouch 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Sencha Touch中自定义TabPanel的行为，通过修改doTabChange函数实现点击标签项时触发特定的handler函数，并展示了如何在TabPanel配置中添加handler属性。

在 sencha-touch-all.js 文件中找到 doTabChange函数

    /**
     * Updates this container with the new active item.
     * @param {Object} tabBar
     * @param {Object} newTab
     * @return {Boolean}
     */
    doTabChange: function(tabBar, newTab) {
        var oldActiveItem = this.getActiveItem(),
            newActiveItem;

        this.setActiveItem(tabBar.indexOf(newTab));
        newActiveItem = this.getActiveItem();
        return this.forcedChange || oldActiveItem !== newActiveItem;
    }

添加代码段，修改后如下：

    /**
     * Updates this container with the new active item.
     * @param {Object} tabBar
     * @param {Object} newTab
     * @return {Boolean}
     */
    doTabChange: function(tabBar, newTab) {
        var oldActiveItem = this.getActiveItem(),
            newActiveItem;

        var index = tabBar.indexOf(newTab);
        var item = this.getInnerItems()[index];
        // console.log(index);
        // console.log(item);
        if (item.config.handler) {
            if (typeof (item.config.handler) == 'string') {
                eval(item.config.handler);
            } else {
                item.config.handler();
            }
            // console.log('handler');
	    // return ; 
        }


        this.setActiveItem(tabBar.indexOf(newTab));
        newActiveItem = this.getActiveItem();
        return this.forcedChange || oldActiveItem !== newActiveItem;
    }

在创建的tabPanel视图中添加 item 的属性方法 handler（）：

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

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'.
            handler:function(){
                console.log("执行自定义函数功能");
            }
       },
       {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});