日期:2014-05-16  浏览次数:20361 次

Extjs的初始化配置项iconCls的使用小问题

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;?
}?
这次图片正确的显示在了按钮上。?


还有一个问题,今天看到一种css写法如下:

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

那个系统的按钮图标可以显示出来。但我在我的系统上测试,却没有显示,这个结果另我很费解。


下面是部分代码:


{
				text : '刷新列表',
				tooltip : '刷新信息列表',
				iconCls : 'icon_refresh',
				handler : function(){
                        }
}
?.icon_refresh {
	background: url(../images/icon/icon_refresh.gif) left top no-repeat !important;
}

?以上这种按钮的能显示。