EXTJS控件样式修改及美化

 

Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”。对界面的美化而言,也是根本性的改变。普通的网页美工面对extjs项目根本无法下手,需要脚本编写人员配合美工一起来完成工作(另外,spketIDE提供的样式修改工具也不理想)。

 

修改extjs的既有样式:

1.覆盖extjs的样式表

这里说的修改不是去改extjs本身的ext-all.css, 也不建议这样去做,这样会影响所有页面;而应该是用自定义的css去覆盖某些控件的默认样式。大部分控件都有类似cls、style的属性供开发者去定制样式;但具体要设置样式的哪些属性才能达到特定效果,api文档就没说了。比如要构建一个不带边框的panel,设置border、bodyborder属性是不行的,还是会有1px的边框。网上去搜就更难了,准备好万能的firebug,自己摸索。

        打开firebug,切换到html选项卡,找到panel对应的div节点,如下图:

panel控件的基准样式是x-panel,其中的border-style:solid就是设置边框的,将其覆盖为border-style:none就成无边框的了。

具体方法:定义无边框的样式.my-panel-no-border{border-style:none},然后定义panel时设置baseCls属性:

var mypanel = Ext.Panel({

  baseCls:'my-panel-no-border',

  //其他属性

});

没文档,搜又不好搜,只能用这种最土的方法了。类似的还有个需求,checkboxgroup里面的checkbox以列模式摆放时,各个checkbox是对齐的;现在需要

对checkbox缩进摆放,体现出一定的层次关系,就像树形列表一样。打开firebug,找checkbox的样式,加上什么padding之类的属性就行了。

 

2.采用js代码动态修改,例如: Ext.get(this.header.query('ul')[0]).applyStyles('background-color:aqua');

 

3.大部分控件都有类似cls、style的属性供开发者去定制样式,例如:bodyStyle: "background-color:#dfe8f6; "不过不推荐这样设置背景色,除非不准备更换主题,常做的方法是把panel背景设为透明background:transparent;这样就不妨碍更换主题了

 

Extjs项目推荐使用第1种方式进行自定义样式。显而易见的是第2种方式是有很多缺点的:

1.脚本被解释执行后才可以生效,影响脚本的整体响应速度。

2.很难维护。在一个数千行的脚本中维护这些“样式代码”恐怕不是一件易事,更何况,代码一旦交给其他人维护,更是大海捞针。

3.如果采用addClass之类方式还可能会引起脚本出错。extjs源码中大量使用样式名称作为选择器,一旦就某个dom增加了其他class,很可能造成这些代码失效。

 

不过,第2种方法有时候也不得不作为一种“暴力手段”而发挥作用。

 

所以要采用覆盖extjs样式名称的方法,将这些覆盖掉的样式名称集中在一个样式表文件中。

 

/*tab文字居中*/ span.x-tab-strip-text{ text-align:center; } /*所有组件body的基础样式*/ .x-panel-body , .x-tab-panel-body{ /*background-color: transparent;*/ /*这个样式使得panel透明了,这样就可以看到背景图或颜色,否则框架会将白色作为背景色*/ } /*tab的样式,tab切换耳朵右边的蓝色部分*/ ul.x-tab-strip-top{ background-image: url("../images/table_titlebg.gif"); background-repeat:repeat-x; }

 

其中的样式名称都是在extjs里面最先定义的,然后在这个文件中再覆盖之(大部分情况是覆盖这个样式的一部分定义而不是全部)。找到某个ui组件的样式需要熟练使用firebug才可以,有些时候要一层层div的寻找,需要一些耐心和技巧。

1  .x-panel-body,.x-tab-panel-body

  这个样式是panel的body部分,可参考ext-all.css或firebug来了解其原来的定义。在开发中,我们需要自定义panel的背景色,比如有些情况下希望panel是透明的,这样只需如下定义即可

   .x-panel-body  , .x-tab-panel-body{

    background-color: transparent;

}

2  .x-grid3

同样的,grid组件的背景色是这里设置的,如果不设置,默认是白色的

3  .x-grid3-hd-row td  表头的样式

4  .x-grid3-row       表格中每一行的样式

5  .x-grid3-row-alt    表格间隔色,框架会在在某些行上比如奇数行加上这个样式

6  Tab头文字居中

span.x-tab-strip-text{

         text-align:center;

}

    … …

    Extjs的样式比较多也比较碎,需要一段时间来找到并覆盖,建议在开发中抽出一段时间来专门进行这个工作,这对代码的维护和移植都是很有好处的。

 

你可能感兴趣的:(前端技术,ext,css,样式)