第六讲:ExtJS布局方式
示例一:两个嵌套子面板。
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一" }), new Ext.Panel({ width:200, height:100, title:"面板二" }) ] }) } ); |
ContainerLayout容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能,它没有可视化的外观,只是提供容器作为布局的基本逻辑,这个类通常被扩展而不通过new关键字直接创建。
如果面板(panel)没有指定任何布局类,则它将会作为默认布局来创建
Fit布局,用于嵌套布局时使之自适应容器大小,通常用于菜单,表单等的嵌套布局。 Fit布局顾名思义,Fit即“自适应”的意思,通常使用在我们进行嵌套布局的时候使用。
示例二:使用Fit布局。
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, layout:"fit", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一" }), new Ext.Panel({ width:200, height:100, title:"面板二" }) ] }) } ); |
Accordion布局由类Ext.layout.Accordion定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。
示例三:Accordion布局
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, layout:"accordion", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一", html:"面板一内容" }), new Ext.Panel({ width:200, height:100, title:"面板二", html:"面板二内容" }) ] }) } ); |
Card布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。
示例四:Card布局
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"card", activeItem:0, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一", html:"面板一内容" }), new Ext.Panel({ width:200, height:100, title:"面板二", html:"面板二内容" }) ], buttons:[ new Ext.Button({text:"上一页",handler:changePage}), new Ext.Button({text:"下一页",handler:changePage}) ] })
function changePage(btn) { var index = Number(panel.layout.activeItem.id.substring(12)); if(btn.text == '上一页'){ index -= 1; if(index < 1){ index = 1; } }else{ index += 1; if(index > 2){ index = 2; } } panel.layout.setActiveItem('ext-comp-100'+index); } } ); |
AnchorLayout是最简单的布局管理器,它只是将元素按照配置的属性在元素容器中进行定位。
示例五:Anchor布局之按比例显示子面板
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"50% 50%", title:"面板一", html:"面板一内容" }), new Ext.Panel({ anchor:"50% 50%", title:"面板二", html:"面板二内容" }) ] }) } ); |
示例六:设置子面板偏移父面板的偏移量
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"-100 -100", title:"面板一", html:"面板一内容" }) ] }) } ); |
AbsoluteLayout布局扩展自Ext.layout.AnchorLayout布局,对应面板布局(layout)配置项的名称为absolute。它可以根据子面板中配置的x/y坐标进行定位,并且坐标值支持使用固定值和百分比两种形式。
示例七:使用固定值进行定位。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"absolute", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ x:10, y:10, width:200, height:100, title:"面板一", html:"面板一内容" }) ] }) } ); |
示例八:使用百分比进行定位。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"absolute", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ x:'10%', y:'10%', width:200, height:100, title:"面板一", html:"面板一内容" }) ] }) } ); |
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:'用户名', allowBlank : false }), new Ext.form.TextField({ fieldLabel:'密码', allowBlank : false }) ] }) } ); |
省略写法
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right", defaultType:'textfield', items:[ { fieldLabel:'用户名', allowBlank : false }, { fieldLabel:'密码', allowBlank : false } ] }) } ); |
Column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"column", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ { title:'子面板一', columnWidth:.2, height : 100 }, { title:'子面板二', columnWidth:.2, height : 100 }, { title:'子面板三', columnWidth:.2, height : 100 }, { title:'子面板四', columnWidth:.2, height : 100 }, { title:'子面板五', columnWidth:.2, height : 100 }
] }) } ); |
Ext.layout.TableLayout对应面板布局layout配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中,可以指定列数(columns),跨行(rowspan),跨列(colspan),可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置,table布局仅有唯一的布局配置项columns,而包含在其中的子面板会具有rowspan和colspan两个配置项!
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"table", layoutConfig : { columns : 4 //设置表格布局默认列数为4列 }, width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title:'子面板一', colspan : 3//设置跨列 }, { title:'子面板二', rowspan : 2,//设置跨行 height : 100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] }) } ); |
这个东西南北中的布局方式,和easyUI中我遇到的一个项目很很相似!
Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"border", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title: 'north Panel', html : '上边', region: 'north',//指定子面板所在区域为north height: 50 }, { title: 'South Panel', html : '下边', region: 'south',//指定子面板所在区域为south height: 50 },{ title: 'West Panel', html : '左边', region:'west',//指定子面板所在区域为west width: 100 },{ title: 'east Panel', html : '右边', region:'east',//指定子面板所在区域为east width: 100 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] }) } ); |