ext布局方式（Ext layout）.docVIP

ext布局方式（Ext layout） Ext several common layout methods Border layout Border layout is commonly used in Ext layout (often using the overall layout of the entire page), feeling a great chance of using. Be familiar with a special code in the ViewPort container before it is the browser window abstraction, you can be understood as the visible area of the browser, it will render to document.body and automatically adjust the size, A page can only create a Viewport. New Ext.Viewport ({) Layout: border, Items:[ {region: North, title: Up, height:50}, {region: south, title: Down, height:50}, {region: West, title: Left, width:200}, {region: East, title: Right, width:200}, {region: center, title:, Center} ] }); Column layout Literally, the Column layout is the column layout. For example, I have two panel in a panel. Now I want to display one on the left and show one on the right. What should I do? It is possible to select Column to divide the parent Panel into two columns, one to the left and the other to the right. Var pnSub1=new Ext.Panel ({) Height:300, ColumnWidth:.3, Html:, this is child panle1 }); Var pnSub2=new Ext.Panel ({) Height:300, ColumnWidth:.7, Html:, this is child panle2 }); Var pn=new Ext.Panel ({) Id:pn, Title:parent Panel, RenderTo:divPanel, Width:800, Height:300, Layout:column, Items:[ PnSub1, PnSub2 ] }); layout In terms of complexity, the fit layout should be the simplest, with minimal setup. The Fit layout is also the layout property that sets the parent container, but the child container does not set any of the corresponding attributes. Its purpose is to allow the child container to adapt itself to the parent container (using the fit layout child container to set the width invalid), but note that if the parent container has multiple sub containers, only the first one is displayed. Var pnSub1=new Ext.Panel ({) Title:, sub panel1, Html: child panel1 (display) }); Var pnSub2=new Ext.Panel ({) Title:, sub panel2, Html: child panel2 (not shown) }); Var pn=new E