extjs页面布局的总结.docxVIP

extjs页面布局总结 　　1.ExtJs布局详解　　2.序言　　1、百度百科上说：ExtJs功能丰富，无人能出其右。无论是界面之美，还是功能之强，extjs都高居榜首。　　2、呵呵，界面之美当是少不了布局的，这篇文章我写layout的七种布局。　　3.　　Border布局__边界布局这中布局是最常用的布局之一，看图　　4.　　border布局：border布局也称边界布局，他将页面分隔为　　west,east,south,north,center这五个部分，我们需要在其items中指定使用region参数为其子元素指定具体位置。　　注意：north和south部分只能设置高度，west和east部分只能设置宽度。northsouthwesteast区域变大，center区域就变小了。参数split:true可以调整除了center四个区域的大小。　　参数collapsible:true将激活折叠功能。　　center区域是必须使用的，Center区域会自动填充其他区域的剩余空间。尤其在中，当指定布局为border时，如果没有指定center区域时，会出现报错信息。　　(function(){　　new({　　title:Viewport,　　layout:border,　　defaults:{　　bodyStyle:background-color:#FFFFFF;,frame:true　　},　　items:[　　{region:west,width:90,title:north,collapsible:true},　　{region:east,width:90,title:north,collapsible:true},　　{region:north,height:100,　　title:north,collapsible:true},　　{region:center,split:true,border:true,collapsible:true,title:center},　　{region:south,title:south,split:true,border:true,collapsible:true,height:100},　　]　　});　　});　　5.Accordion布局__手风琴布局　　accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有和所有子项，才可以使用accordion布局。　　(function(){　　varaccordion=(,{　　title:west,　　layout:accordion,//设置为手风琴布局　　layoutConfig:{　　animate:true　　},　　width:250,　　minWidth:90,　　region:west,//设置方位　　split:true,　　collapsible:true,　　items:[　　{title:嵌套面板一,html:嵌套面板一,iconCls:save},　　{title:嵌套面板二,html:嵌套面板二,iconCls:search},　　{title:嵌套面板三,html:嵌套面板三,iconCls:back},　　{title:嵌套面板四,html:嵌套面板四,iconCls:12}　　]　　});　　new({　　title:Viewport,　　layout:border,//这里是边界布局defaults:{　　bodyStyle:background-color:#FFFFFF;,frame:true　　},　　items:[　　accordion,//这里是手风琴布局　　{region:east,width:90,title:north,collapsible:true},　　{region:north,height:100,title:north,collapsible:true},　　{region:center,split:true,border:true,collapsible:true,title:center},　　{region:south,title:south,split:true,border:true,collapsible:true,height:100}　　]　　});　　});　　6.Card布局__类似向导　　Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就