关于Ext tabpanel 自定义active 样式/iconCls

   今天公司接到一个客户移动端个性化需求，需求是这样子的也就是一个tab页变换页签时需要编程客户自定义的图标也就是跟微信的联系人一个效果的样子 

   废话不多说直接上代码

　　　　{
            xtype:'tabpanel',
            tabBarPosition: 'bottom',
            items:[{
                iconCls: 'bt_sh',
                layout: 'fit',
                listeners:{
                    activate:function(s,r,e,opt){
                        r.getTabBar().innerItems[0].setIconCls('bt_sh_active !important');//这里改变当前选中tab的iconCls
                        r.getTabBar().innerItems[0].setActiveCls('bt_bb_active_span !important');//这里改变当前选中tab时展示的activeCls
                    }
                }
            }]
        }

代码解析

先看Ext.tab.Panel的源码

Ext.define('Ext.tab.Panel', {
    extend: 'Ext.Container',
    xtype : 'tabpanel',
    alternateClassName: 'Ext.TabPanel',
 
    requires: ['Ext.tab.Bar']//这里我们可以看见tabpanel是直接引入了一个tabbar，这也就是所我们的iconCls是赋值给tabBar这个元素的，那么要想改变iconCls就是要改变tabBar的iconCls
});

然而我tabpanel是直接给我们提供了getTabBar()的属性和方法的，所以直接通过自身就可以调用到当前选中的这个tabBar
然后我们在看看tabBar给我们提供了的属性和方法就知道怎么操作了

Ext.define('Ext.tab.Tab', {
    extend: 'Ext.Button',//因为tabBar是继承button所以自身就继承了父类的iconCls属性，故可以直接调用setIconCls()方法改变当前选中元素的iconCls
    xtype: 'tab',
    alternateClassName: 'Ext.Tab',
    isTab: true,
 
    config: {
        baseCls: Ext.baseCSSPrefix + 'tab',
        pressedCls: Ext.baseCSSPrefix + 'tab-pressed',
        activeCls: Ext.baseCSSPrefix + 'tab-active',//看到这里我们就能知道要想改变tabBar的选中样式就可以直接调用setActiveCls()方法就行了
        active: false,
        title: ' '
    }
});