一、布局 实例.doc

一．布局实例 1.Border Javascript源码： /**?*?Layout?Border?布局实例?*?*?@author?9iE?*?@email?zu.stone@?*?三人行--取之于网,用之于网!?*/Ext.BLANK_IMAGE_URL?=?../ext/resources/images/default/s.gif;//?application?main?entry?pointExt.onReady(function()?{????Ext.QuickTips.init();??/*???*?创建本部容器采用panel作为容器???*/??var?northPanel?=?new?Ext.Panel({????title:北,//设置panel的标题????region:north,//用来制定该panel处于哪个位置????height:100,//设置panel的高度????split:?true,//添加分割线是否可以改变该panel的大小????minSize:?40,//设置拖动的最小拖动值????maxSize:?100,//设置拖动的最大拖动值????collapsible:true,//是否让panel能自动缩放????collapseMode:mini,//在分割线处出现按钮????html:北部容器??});??var?southPanel?=?new?Ext.Panel({????title:南,????region:south,????width:100,????height:100,????split:?true,//添加分割线是否可以改变该panel的大小????minSize:?40,//设置拖动的最小拖动值????maxSize:?100,//设置拖动的最大拖动值????collapsible:true,//是否让panel能自动缩放????collapseMode:mini,//在分割线处出现按钮????html:南部容器??});??var?westPanel?=?new?Ext.Panel({????title:西,????region:west,????width:100,????height:50,????split:?true,//添加分割线是否可以改变该panel的大小????minSize:?40,//设置拖动的最小拖动值????maxSize:?100,//设置拖动的最大拖动值????collapsible:true,//是否让panel能自动缩放????collapseMode:mini,//在分割线处出现按钮????html:西部容器??});??var?eastPanel?=?new?Ext.Panel({????title:东,????region:east,????width:100,????height:50,????split:?true,//添加分割线是否可以改变该panel的大小????minSize:?40,//设置拖动的最小拖动值????maxSize:?100,//设置拖动的最大拖动值????collapsible:true,//是否让panel能自动缩放????collapseMode:mini,//在分割线处出现按钮????html:东部容器??});??var?centerPanel?=?new?Ext.Panel({????title:中,????region:center,????html:中部容器??});??/*??创建一个整体的容器，用来填充其他的容器??并将这个容器renderTo（渲染）到页面的某一个标签上??*/??var?mainPanel?=?new?Ext.Panel({????layout:border,????border:true,????items:[northPanel,southPanel,westPanel,eastPanel,centerPanel]??});??//?create?and?show?window??var?win?=?new?Ext.Window({?????id:layout_border-win????,width:650????,height:450????,minWidth:300????,minHeight:200????,plain:true????,title:Ext.fly(title).dom.innerHTML????,layout:fit????,border:false???