日期:2014-05-16  浏览次数:20507 次

浅谈extjs的样式及美化

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

?

修改extjs的既有样式有两种方式

1.?????? 采用js代码动态修改,例如:

Ext.get(this.header.query('ul')[0]).applyStyles('background-color:aqua');

2.?????? 覆盖extjs的样式表

?

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

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

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

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

?

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

?

所以要采用覆盖extjs样式名称的方法,将这些覆盖掉的样式名称集中在一个样式表文件中。例如,作者的项目中某个jsp文件的样式表引入部分

??

<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/js/extJs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/js/extJs/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/css/web3.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContex