extjs iconCls 使用

使用过Ext（http://www.extjs.com）的同志都应该知道，每一个组件（Component）在初始化的时候，都会有一个配置参数（Config）{在Ext2中，基本上所有的组件的构造函数只接受一个参数，这个参数或者是一个Config Object或都是一个Array of Config Object}，其中，许多组件，如Menu，Button都有一个配置选项iconCls，很明显，这个是用来配置按钮等的图标的，所以假设我们要初始化一个Button，我们在JS里这样写：
Html代码
var button = new Ext.Button({  
        text: "Hello",  
        iconCls: "hello-button"  
}); 

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

然后我们再在CSS中写下如下规则：
Html代码
.hello-button {  
        background: url(images/hello.png) left top no-repeat;  
} 

.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规则修正为：
Html代码
.hello-button {  
        background: url(images/hello.png) left top no-repeat !important;  
} 

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

Bingo~这次图片正确的显示在了按钮上。

当然，按照官方的API，你还有另外一种在按钮上添加图标的方法，将button的Config如下设置：
Html代码
var button = new Ext.Button({  
        text: "Hello",  
        icon: "images/public.gif",  
        cls: "x-btn-text-icon"  
}); 

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

这样做的坏处在于，你必须将图片的位置写入到JS里，没有将表现的部分从JS里脱离，如果使用第一种方法的话，可以更容易的更改某个按钮的图标。