使用過Ext(http://www.extjs.com)
的同志都應該知道,每一個組件(Component)在初始化的時候,都會有一個配置參數(Config){在Ext2中,基本上所有的組件的構造函數只
接受一個參數,這個參數或者是一個Config Object或都是一個Array of Config
Object},其中,許多組件,如Menu,Button都有一個配置選項iconCls,很明顯,這個是用來配置按鈕等的圖標的,所以假設我們要初始
化一個Button,我們在JS里這樣寫:
var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});
然后我們再在CSS中寫下如下規則:
.hello-button {
background: url(images/hello.png) left top no-repeat;
}
把JS和CSS文件都正確的引入到頁面當中后,我們只能看到按鈕上空出來了一個放置圖片的位置,而圖片并沒有顯示出來,通過使用Firebug(http://www.getfirebug.com)
來查看頁面,通過Inspect我們生成的按鈕的Style,我們發現CSS規則hello-button被Ext原有的CSS規則覆蓋掉了。但是官方給
的Sample里是可以用的啊,查看Sample里的CSS,我發現它比我寫的多了一行字,!important,然后,我把我原有的CSS規則修正為:
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}
Bingo~這次圖片正確的顯示在了按鈕上。
當然,按照官方的API,你還有另外一種在按鈕上添加圖標的方法,將button的Config如下設置:
var button = new Ext.Button({
text: "Hello",
icon: "images/public.gif",
cls: "x-btn-text-icon"
});
這樣做的壞處在于,你必須將圖片的位置寫入到JS里,沒有將表現的部分從JS里脫離,如果使用第一種方法的話,可以更容易的更改某個按鈕的圖標。