ext組件iconcls圖標問題

首先是ext的iconCls配置問題：

使用過Ext（http://www.extjs.com）的同志都應該知道，每一個組件（Component）在初始化的時候，都會有一個配置參數（Config）{在Ext2中，基本上所有的組件的構造函數只接受一個參數，這個參數或者是一個Config Object或都是一個Array of Config Object}，其中，許多組件，如Menu，Button都有一個配置選項iconCls，很明顯，這個是用來配置按鈕等的圖標的，所以假設我們要初始化一個Button，我們在JS里這樣寫：

Java代碼

1. var button = new Ext.Button({   
2.         text: "Hello",   
3.         iconCls: "hello-button"
4. });  

var button = new Ext.Button({ 
        text: "Hello", 
        iconCls: "hello-button" 
}); 

然后我們再在CSS中寫下如下規則：

Java代碼

1. .hello-button {   
2.         background: url(images/hello.png) left top no-repeat;   
3. }  

.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規則修正為：

Java代碼

1. .hello-button {   
2.         background: url(images/hello.png) left top no-repeat !important;   
3. }  

.hello-button { 
        background: url(images/hello.png) left top no-repeat !important; 
} 

Bingo~這次圖片正確的顯示在了按鈕上。

當然，按照官方的API，你還有另外一種在按鈕上添加圖標的方法，將button的Config如下設置：

Java代碼

1. var button = new Ext.Button({   
2.         text: "Hello",   
3.         icon: "images/public.gif",   
4.         cls: "x-btn-text-icon"
5. }); 

var button = new Ext.Button({ 
        text: "Hello", 
        icon: "images/public.gif", 
        cls: "x-btn-text-icon" 
});

這樣做的壞處在於，你必須將圖片的位置寫入到JS里，沒有將表現的部分從JS里脫離，如果使用第一種方法的話，可以更容易的更改某個按鈕的圖標。

下面是ext使用iconCls的路徑問題：

在我的這個項目開發中，有時候總遇到圖片無法顯示的問題。

Javascript腳本文件，Css樣式文件的圖片路徑問題總是一大難題。因為在js腳本和css文件里我不知該如何像jsp頁面一樣采用<%=request.getContextPath()%>獲取項目根路徑。

所以針對Css中圖片路徑問題總結如下：

1、不要給背景圖片路徑加引號
將background:url("xxx.gif")改為background:url(xxx.gif)
因為對於部分瀏覽器加引號反而會引起錯誤。

2、背景圖片的路徑是相對與當前css頁面的路徑。

例如：
有如下目錄結構

Java代碼

1. |--images  
2.     |--xxx.gif  
3. |--css  
4.     |--xx.css  
5. |--index.html 

|--images
    |--xxx.gif
|--css
    |--xx.css
|--index.html

代碼內容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif圖片其寫法為：background:url(../images/xxx.gif)

3、我們通常用link的方法直接引用一個CSS文件到HTML（或其它活動文檔）文件中。我們會發現有時候我們的圖片無法顯示了。此時，請查看你的CSS代碼，是不是重復設置有問題，是不是圖片的定位有問題。如果這些都沒有問題請去掉background的重復與定位屬性，還原成默認性。如果圖片還是沒有出現，那只能是我們今天所說的路徑問題了！在一般情況下，我們習慣於這樣設置圖片路徑：

Java代碼

1. Example Source Code：  
2.     background-image:url(logo.jpg);  
3.        background-image:url(../logo.jpg);  
4.        background-image:url(../images/logo.jpg); 

Example Source Code：
    background-image:url(logo.jpg);
       background-image:url(../logo.jpg);
       background-image:url(../images/logo.jpg);

　對於第一種情況“url(logo.jpg)”。我們要看此圖片是不是與CSS文件在同一目錄。對於第二與第三種情況，我們是極力不推薦使用的，因為我們的網頁文件可能存在於多級目錄中，不同級目錄的文件位置注定了我們的相對路徑是不一樣的。而這樣就讓問題復雜化了，很可能圖片在這個文件中顯示正常，換了一級目標，圖片就找不到影子了。
　　有一種方法可以輕松解決這一問題，我們可能建立一個公共文件目錄，用來存放一些公用的圖片文件，JS腳本，CSS文件，例如“common”，我們將CSS文件直接置於該目錄中，也可以將圖片文件也直接存於該目錄中，如果圖片文件較多在其內部建立一個目錄存放圖片文件“common/images”。我們在CSS文件中直接寫：url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的問題了。

關於網站文件的歸類與存放，除了根據個人習慣，還要考慮科學性。如果是大型的項目，你應該遵循團隊的約定，不然這些問題是夠頭疼的！