关于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.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: ' ' } });
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版