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)就可以搞定上面的问题了。

关于网站文件的归类与存放，除了根据个人习惯，还要考虑科学性。如果是大型的项目，你应该遵循团队的约定，不然这些问题是够头疼的！