EXT的CSS渲染过程——EXT.Window

上图是一个Window最普通的组件

通常我们使用的是ext-all.css，其实它是由许多个组件css组成的一个大css而已，见下图：

对于一个window的窗口，其实只有引入window.css就足够了，我们来看window.css的一个片段

background:transparent url(../images/default/window/top-bottom.png) repeat-x 0 0; background:transparent url(../images/default/window/left-corners.png) no-repeat 0 0; background:transparent url(../images/default/window/right-corners.png) no-repeat right 0; background:transparent url(../images/default/window/top-bottom.png) repeat-x 0 bottom; .x-window-bc.x-window-footer { background:transparent url(../images/default/window/left-corners.png) no-repeat 0 bottom; background:transparent url(../images/default/window/right-corners.png) no-repeat right bottom; font:normal 11px tahoma,arial,helvetica,sans-serif; background:transparent url(../images/default/window/left-right.png) repeat-y 0 0; background:transparent url(../images/default/window/left-right.png) repeat-y right 0; }

注意其中的 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个类的组织形式！

<divclass="{0}-tr"> <divclass="{0}-tc"> </div> <divclass="{0}-ml"> <divclass="{0}-mr"> <divclass="{0}-mc"> </div> <divclass="{0}-bl"> <divclass="{0}-br"> <divclass="{0}-bc"> </div>

我这番讲解再结合你的CSS基本功，EXT的CSS就可以轻松玩转啦。其他重要的CSS类继续挖掘中