EXT iconCls说明

最新推荐文章于 2015-05-17 16:54:22 发布

原创最新推荐文章于 2015-05-17 16:54:22 发布 · 8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #licensing #library #class #url #api

EXTjs 专栏收录该内容

8 篇文章

订阅专栏

本文解析了ExtJS中按钮图标配置方法，重点介绍了iconCls属性及其使用案例。通过具体代码示例，展示了不同尺寸图标的应用，并解释了这些图标样式在CSS中的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习ext 看examples中的事例，其中有一个地方是这样写的：

new ButtonPanel(
            'Icon Only',
            [{
                iconCls: 'add16'
            },{
                iconCls: 'add24',
                scale: 'medium'
            },{
                iconCls: 'add',

                scale: 'large'
            }]
        );

例子的效果是：

看了半天没有明白iconCls后面的add16 ,add24是什么意思。后来看到buttons.css 终于明白了应该是图片样式的意思，既是CSS里面定义的class。

后来看了看API，里面也是这么写的。遇到什么问题还是多看API。

iconCls : String

用来指定背景图片的样式类。A css class which sets a background image to be used as the icon for this button

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
.add {
    background-image: url(images/add.gif) !important;
}
.add16 {
    background-image: url(images/add16.gif) !important;
}
.add24 {
    background-image: url(images/add24.gif) !important;
}