巧用CSS避免ExtJS应用界面同质化
ExtJS强大的界面组件,让程序员在美工不参与的情况也能开发出Web界面。然而,可能带来的问题就是Web应用软件界面的同质化。
最近有时间仔细研究了几个ExtJS应用的实现细节,发现可以结合组件的id值和CSS,达到界面外观定制的效果。
不过,ExtJS官方好像没有提供这方面的文档,所以其规律很难系统化。有兴趣的同学可以从附件中体会这种用法。
附件中的程序在ExtJS 2.1下测试通过。解开后直接把其中的文件拷贝到 ext-2.1\examples\panel 即可。
主要功能如下:
1.例子1:f1.html
(1)用CSS改变工具条背景样式
参照了:http://extjs.com/forum/showthread.php?t=26639
(2)用图片代替“图标+文字”按钮
参照了:http://www.extjs.com/forum/showthread.php?t=16408
(3)用CSS改变面板背景颜色
(4)用CSS改变面板在页面上的位置
2.例子2:f2.html
(1)用CSS改变工具条背景样式
(2)用CSS改变工具条按钮的样式