剖析EXT的CSS渲染过程.doc

剖析EXT的CSS渲染过程——EXT.Window 发布时间：2008-11-30 ? 上一篇文章： EXT的addListener,Ext.on做了些什么？ ? 下一篇文章： Ext源码分析：Ext.onReady到底做了什么？ 一直没有时间来搞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 都是写死在代码