Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks

使用过Ext(http://www.extjs.com) 的同志都应该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只 接受一个参数,这个参数或者是一个Config Object或都是一个Array of Config Object},其中,许多组件,如Menu,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;
}

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

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

});

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

posted on 2009-11-18 22:02 seal 阅读(666) 评论(0)  编辑  收藏 所属分类: EXTJS

只有注册用户登录后才能发表评论。


网站导航: