ExtJs 通過 toggleClass 實現樣式切換 ——以及更多的CSS操作
此處重點介紹一下 toggleClass的應用，如圖：
css ↓
extjs ↓
修改之後 ↓
同樣是為了實現一個樣式切換的效果，之前不知道 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();//清除這個元素的透明度設定