senchatouch 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'
        }
    ]
});






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章