ext 中的iconCls配置以及使用以及路徑問題

首先是ext的iconCls配置問題：

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

Java代碼

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

而後咱們再在CSS中寫下以下規則：

Java代碼

.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代碼

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

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

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

Java代碼

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中圖片路徑問題總結以下：

一、不要給背景圖片路徑加引號

將background:url("xxx.gif")改成background:url(xxx.gif)由於對於部分瀏覽器加引號反而會引發錯誤。

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

例如：有以下目錄結構

Java代碼

|--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)

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

Java代碼

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)就能夠搞定上面的問題了。

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