此处重点介绍一下 toggleClass的应用,如图:

css ↓

ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作_ExtJs


extjs ↓

ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作_css_02

修改之后 ↓

ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作_ExtJs_03

同样是为了实现一个样式切换的效果,之前不知道 toggleClass这个神器的时候还傻傻地用 hasClass + removeClass + addClass 来进行判断操作。。。







一、获取元素(Getting Elements) 

1.Ext.get 


var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 



2. Ext.fly 

var el = Ext.fly('myElementId')//不需要缓存。 


注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。



3.Ext.getDom 

var elDom = Ext.getDom('elId'); // 依据id来查dom节点 


var elDom1 = Ext.getDom(elDom);// 依据dom节点来查dom节点 



二、CSS元素 

4.addClass 


Ext.fly('elId').addClass('myCls');// 加入元素的'myCls'的样式 



5.radioClass 


Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。



6.removeClass 


Ext.fly('elId').removeClass('myCls');// 移除元素的样式 



7.toggleClass 

Ext.fly('elId').toggleClass('myCls'); // 加入样式 

Ext.fly('elId').toggleClass('myCls'); // 移除样式 


Ext.fly('elId').toggleClass('myCls'); // 再加入样式 



8.hasClass 

if (Ext.fly('elId').hasClass('myCls')){//判断是否已加上这个样式 

// 是有样式的…… 




9.replaceClass 


Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式 



10.getStyle 

var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。 


var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。 



11.setStyle 

Ext.fly('elId').setStyle({ 

display : 'block', 

overflow : 'hidden', 

cursor : 'pointer' 


});//设置元素的样式,也可以用一个对象参数包含多个样式。 



12.getColor 


Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色 



13.setOpacity 


Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。 



14.clearOpacity 


Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置