剖析EXT的CSS衬着过程

《剖析EXT的CSS衬着过程》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、剖析EXT的CSS渲染过程——EXT.Window•上一篇文章：EXT的addListener,Ext,on做了些什么？•下_篇文章：Ext源码分析：Ext.onReady到底做了什么？一直没有吋间来搞EXT的CSS,—方面没有这么多吋间，一方面国内关于EXT的CSS资料几乎没有，即使国外一些网站也非常难找到关于EXT的CSS资料，倒是有很多皮肤卜•载，新手们可以照着皮肤來进行修改，也是不错的选择。废话少说，我先从EXT.WindowT手，来剖析每个CSS类的用途！ResizeMeSendCancel上图

2、是一个Window最普通的组件通常我们使用的是ext-al1.css,其实它是曲许多个组件css组成的一个大css而已，见下图：•QI-a-a-a-a

3、panel・cssprogress.cssqtips.cssREADME,txtreset.cssreset-min.cssresizable.csstabs,csstoolbar・csstree.csswindow.cssxtheme"gray.css对于一个window的窗口,其实只有引入window,css就足够了,我们来看window,css的一个片段1.•x-vindow-tc{2.background:transparenturl(../imeiges/defciult/window/top

4、-bottom.png)repeat-x00;3.overflow:hidden;4.zoom:1;5.}6..x-window-tl{7.background:transparenturl(../images/defauIt/window/lcft-corncrs.png)no-rcpcat00;8.padding-left:6px;9.zoom:1;10.z-index:1;11.position:relative;12.}13..x-window-tr{14.background:transpare

5、nturl(…/images/default/window/right-corners.png)no-repeatright0；15.padding-right:6px;16.}17..x-window-bc{18.background:transparenturl(../images/defauIt/window/top-bottom,png)repeat-x0bottom;19.zoom:1;20.}18..x-window-bc.x-window-footer{19.padding-bottom:6

6、px;20.zoom:1;21.font-size:0;25.line-height:0;26.}27..x-window-bl{28.background:transparenturl(../images/default/window/1eft-corners,png)no-repeat0bottom;29.padding-left:6px;30.zoom:1;31.}32..x~windowbr{33.background:transporcnturl(../images/default/window

7、/right-corners.png)no-repeatrightbottom;34.padding-right:6px;35.zoom:1;36.}37..x-window-mc{38.border:lpxsolid#99bbe8;39.padding:0;40.margin:0;41.font:nonnalllpxtahoma,arial,hclvctica,sans-serif;42.background:#dfe8f6;43.}44.44..x~windowml{45.background:tra

8、nsporcnturl(../images/default/window/left-right.png)repeat-y00;46.padding-left:6px;47.zoom:1;48.}50..x~window-mr{51.background:transparenturl(../images/default/window/1eft-right,png)repeat-yright0;52.padding-right:6