extjs 的 css

extjs 的 css

ext 内置提供了许多默认的 css 样式,也可以定制 css,

------
定制 css 样式

各种 Component 提供了 css相关 cp & property & method , 以设置 css 样式,

------
Component 的 css

* config option
      * cls                  使用的 css class
      * disabledClass            当 Component 被 disabled 时,所使用的 css class
      * ctcls                  作用于 所在Container 的 css class
      * itemCls            作用于 表单域 的 css class,
      * labelStyle            作用于 label 的 css,内容是 css 代码,
      * overCls            鼠标经过时的 css class,
      * style                  指定 css 样式,值应当满足 Ext.Element.applyStyles() 方法,
* method
      * addClass()            添加1个 css class
      * removeClass()            删除1个 css class
*

------
icon 的 css

一些 Component 可以带有 icon 图标,
拥有 一些 cp & method 来指定 icon 图标,

可带有 icon 的 组件:
* Button
* BaseItem
* ...
*

icon 相关 的 css
* cp
      * iconCls            图标的 css class,通常指定 1个背景图片 作为图标,
      * icon                  指定1个图标的路径,通常在 iconCls 中指定 即可,
      * iconAlign            指定图标的对齐方式,通常在 iconCls 中指定 即可,
      * setIconClass()      设置 背图标的 css class
      *
* method
      * setIconClass            设置 背图标的 css class
      *

例子:
      /* 定义 css class */
      .google_icon {
            background-image:url(public/img/google_logo.png) !important;
      }

      /* 设置 图标 */
      {
            xtype: 'button',
            type: 'button',
            text: 'download',
            iconCls: 'google_icon'
      }


------

你可能感兴趣的:(css,ext,Google)