一直没有时间来搞EXT的CSS，一方面没有这么多时间，一方面国内关于EXT的CSS资料几乎没有，即使国外一些网站也非常难找到关于EXT的CSS资料，倒是有很多皮肤下载，新手们可以照着皮肤来进行修改，也是不错的选择。
废话少说，我先从EXT.Window下手，来剖析每个CSS类的用途！
上图是一个Window最普通的组件
通常我们使用的是ext-all.css，其实它是由许多个组件css组成的一个大css而已，见下图：
对于一个window的窗口，其实只有引入window.css就足够了，我们来看window.css的一个片段
- .x-window-tc {
- background: transparent url(../images/default/window/top-bottom.png) repeat-x 0 0;
- overflow:hidden;
- zoom:1;
- }
- .x-window-tl {
- background: transparent url(../images/default/window/left-corners.png) no-repeat 0 0;
- padding-left:6px;
- zoom:1;
- z-index:1;
- position:relative;
- }
- .x-window-tr {
- background: transparent url(../images/default/window/right-corners.png) no-repeat right 0;
- padding-right:6px;
- }
- .x-window-bc {
- background: transparent url(../images/default/window/top-bottom.png) repeat-x 0 bottom;
- zoom:1;
- }
- .x-window-bc .x-window-footer {
- padding-bottom:6px;
- zoom:1;
- font-size:0;
- line-height:0;
- }
- .x-window-bl {
- background: transparent url(../images/default/window/left-corners.png) no-repeat 0 bottom;
- padding-left:6px;
- zoom:1;
- }
- .x-window-br {
- background: transparent url(../images/default/window/right-corners.png) no-repeat right bottom;
- padding-right:6px;
- zoom:1;
- }
- .x-window-mc {
- border:1px solid #99bbe8;
- padding:0;
- margin:0;
- font: normal 11px tahoma,arial,helvetica,sans-serif;
- background:#dfe8f6;
- }
- .x-window-ml {
- background: transparent url(../images/default/window/left-right.png) repeat-y 0 0;
- padding-left:6px;
- zoom:1;
- }
- .x-window-mr {
- background: transparent url(../images/default/window/left-right.png) repeat-y right 0;
- padding-right:6px;
- zoom:1;
- }
注意其中的 tl tc tr ml mc mr bl bc br 分别是上中下的意思，画个草图看下
| x-window-tl | tc | tr |
| ml | mc | mr |
| bl | bc | br |
比如，我们拿掉了x-window-tl这个类，那么左上角的图片就会消失
明白了吧？
那么x-window-bc x-window-tc 这些类在js文件里面是如何组织起来的呢？和一个很重要baseCls密切联系，在Ext.Window类里面，这个属性的值是”x-window”。在EXT里面CSS类的命名不能自己乱改的，tl tc tr ml mc mr bl bc br 都是写死在代码里的（当然你可以修改源码），我们只能改baseCls的属性值，并且修改相应的css类。比如我们自定义baseCls=”myWindow”，那么EXT会去CSS里面找 myWindow-tl，明白了吧？下面摘录源代码里面，这9个类的组织形式！
- <div class="{0}-tl">
- <div class="{0}-tr">
- <div class="{0}-tc">
- </div>
- </div>
- </div>
- <div class="{0}-ml">
- <div class="{0}-mr">
- <div class="{0}-mc">
- </div>
- </div>
- </div>
- <div class="{0}-bl">
- <div class="{0}-br">
- <div class="{0}-bc">
- </div>
- </div>
- </div>
我这番讲解再结合你的CSS基本功，EXT的CSS就可以轻松玩转啦。其他重要的CSS类继续挖掘中
留言