Ext中初始化配置项iconCls的使用方法
来源:互联网 发布:java volatile 编辑:程序博客网 时间:2024/03/29 04:48
使用过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里脱离,如果使用第一种方法的话,可以更容易的更改某个按钮的图标。
- Ext中初始化配置项iconCls的使用方法
- Ext中应用iconCls
- 了解:Ext中iconCls配置、使用以及路径问题
- EXTJS中Ext.grid.GridPanel配置项autoExpandColumn的使用方法
- ext 中的iconCls配置以及使用以及路径问题
- Ext 自定义iconCls
- EXT iconCls说明
- Ext中Resizable的使用方法
- EXT中的iconCls 图标加载
- ext常用iconCls 很实用
- Ext Js 3.2中Record的使用方法
- EXTJs 中icon 与iconCls的区别及用法!
- Ext.Ajax的使用方法
- Ext Js中Ext.XTemplate使用方法学习
- Extjs中Ext.data.Model的schema配置项
- easyui的iconCls无法显示
- ext.net combobox 的初始化
- UISegment 初始化的使用方法
- Mac OS X应用程序格式详解
- 认为自己对C++指针和内存很了解的人进来看看(百分悬赏)!!
- Eclipse 3.4新特性 - Plug-in spy
- 一道蛮好玩的题目——某顶尖游戏公司程序员笔试第一题(摔xbox)
- 隐藏托盘图标
- Ext中初始化配置项iconCls的使用方法
- 也谈把冰卖给爱斯基摩人
- oracle新手常遇到的问题及解决方案
- weblogic download
- 小佳弱弱学习——unix环境高级编程(二)
- 软件测试职业规划
- 比较IBM MQSeries和BEA WebLogic JMS Server
- 终于可以回国了
- 小佳弱弱学习——unix环境高级编程(三)