6.1 布局的用途
1 6.1 布局的用途 2 //决定把什么东西放到什么位置; 3 var vieport = new Ext.Viewport({ 4 layout:'border', //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小; 5 items:[{ 6 region:'north', //指定组件的具体位置; 7 height:40, 8 html:'<h1>顶部</h1>' 9 },{10 region:'west',11 width:100,12 html:'<p>左侧区域</p>'13 },{14 region:'center',15 html:'主要内容'16 }]17 });18 //Ext的所有布局都是从Ext.Container开始的,Ext.Container的父类是Ext.BoxComponent;19 //Ext.BoxComponent是一个盒子组件,可以定义宽度/高度和位置等;20 21 //Ext.Container及其子类22 >.Ext.Container //Ext.Container的子类都可以用layout对内部的items进行布局;23 >.Ext.Viewport 24 >.Ext.Panel 25 >.Ext.TabPanel26 >.Ext.Tip27 >.Ext.Window 28 >.Ext.form.FieldSet 29 >.Ext.form.FormPanel 30 >.Ext.tree.TreePanel31 >.Ext.grid.GridPanel32 >.Ext.grid.EditorGridPanel33 >.Ext.grid.PRopertyGrid34 35 //所有布局类也有一个共同的超类Ext.layout.ContainerLayout36 //凡是该超类的子类都可以对Ext.Container及其子类进行布局定义;37 >.Ext.layout.ContainerLayout //容器布局38 >.Ext.layout.AnchorLayout //锚点布局39 >.Ext.layout.AbsoluteLayout //绝对定位布局40 >.Ext.layout.FormLayout //表单布局41 >.Ext.layout.BorderLayout //边框布局42 >.Ext.layout.ColumnLayout //分列布局43 >.Ext.layout.FitLayout //自适应布局44 >.Ext.layout.Accordion //折叠布局45 >.Ext.layout.CardLayout //卡片布局46 >.Ext.layout.TableLayout //表格布局6.2 最简单的布局--FitLayout
1 6.2 最简单的布局--FitLayout 2 //自动适应页面大小 3 Ext.onReady(function(){ 4 var store = new Ext.data.ArrayStore({ 5 fields:['id','name','desc'], 6 data:[['1','name1','desc1']] //数据存储器; 7 }); 8 9 var grid = new Ext.grid.GridPanel({ //创建带数据的表格;10 title:'grid',11 viewConfig:{forceFit:true},12 store:store,13 columns:[14 {header:'id',dataIndex:'id'},15 {header:'名称',dataIndex:'name'},16 {header:'描述',dataIndex:'desc'}17 ],18 tbar:new Ext.Toolbar(['添加','修改','删除']),19 bbar:new Ext.PagingToolbar({20 pageSize:15,21 store:store22 })23 });24 25 var viewport = new Ext.Viewport({26 layout:'fit', //指向自适应布局;27 items:[grid] //将表格引入布局;28 });29 });6.3 常用的边框布局--BorderLayout
1 6.3 常用的边框布局--BorderLayout 2 //FitLayout每次只能使用一个子组件;而现实中我们使用最多的是Ext.layout.BorderLayout布局; 3 var viewport = new Ext.Viewport({ 4 layout:'border', //指向为BorderLayout布局; 5 items:[ 6 {region:'north',html:'north',height:120}, //region:指定组件的位置;html:组件内容; 7 {region:'south',html:'south',height:30}, 8 {region:'west',html:'west',width:40}, 9 {region:'east',html:'east',width:100},10 {region:'center',html:'center'} //center的大小是其他4个部分设置好之后计算出来的;不可以省略;11 ]12 });13 14 6.3.1 设置子区域的大小15 //可以直接设置north与south的高度和west与east的宽度;16 17 6.3.2 使用split并限制它的的范围18 //使用split参数,用户可以自行拖放来改变某一个区域的大小;19 //使用minSize和maxSize将限制用户拖放的范围;20 var viewport = new Ext.Viewport({21 layout:'border',22 items:[23 {region:'north',html:'north',split:true}, //顶部可以上下拖动改变大小;24 {region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120}, 25 //左侧可以左右拖动改变大小; 但宽度的范围在80~120之间;26 {region:'center',html:'center'}27 ]28 });29 30 6.3.3 子区域的展开和折叠--collapsible31 //属性collapsible:true;这个属性激活了区域折叠功能;32 //title:'west';折叠区域的标题;必须跟collapsible一起设置;33 items:[34 {region:'north',html:'north',heith:100,title:'顶部',collapsible:true},35 ...36 ]6.4 制作伸缩菜单布局--Accordion(折叠布局)
1 6.4 制作伸缩菜单布局--Accordion(折叠布局) 2 //BorderLayout布局下嵌套的Accordion布局; 3 var viewport = new Ext.Viewport({ 4 layout:'border', //第一层是BorderLayout布局; 5 items:[{ 6 region:'west', //子组件左侧区域; 7 width:200, 8 layout:'accordion', //子组件是Accordion(折叠)布局; 9 split:true,10 layoutConfig:{ //布局配置信息;11 titleCollapse:true, //点击标题也可折叠;12 animate:true, //折叠动画;13 activeOnTop:false //打开的组件是否置顶;14 },15 items:[{ //孙组件;折叠布局;16 title:'第一栏',17 html:'第一栏'18 },{19 title:'第二栏',20 html:'第二栏'21 }]22 },{23 region:'center', //子组件center区域;24 html:'center区域'25 }]26 });6.5 实现操作向导的布局--CardLayout
1 6.5 实现操作向导的布局--CardLayout 2 //为CardLayout配置几个子面板,每次只显示其中一个; 3 var viewport = new Ext.Viewport({ 4 layout:'border', 5 items:[{ 6 region:'west', 7 id:'wizard', 8 width:200, 9 title:'xx向导',10 layout:'card',11 activeItem:0,12 bodyStyle:'padding:15px',13 defaults:{14 border:false15 },16 bbar:[{17 id:'move-prev',18 text:'上一步',19 handler:function(){20 navHandler(-1);21 },22 disabled:true23 },'->',{24 id:'move-next',25 text:'下一步',26 handler:function(){27 navHandler(1);28 },29 }],30 items:[{31 id:'card-0',32 html:'<h1>欢迎使用向导</h1><p>1/3</p>'33 },{34 id:'card-1',35 html:'<p>2/3</p>'36 },{37 id:'card-2',38 html:'<p>完成</p>'39 }]40 },{41 region:'center',42 split:true,43 border:true44 }]45 });46 //设置navHandler函数 (带注释!)47 var navHandler = function(direction){48 var wizard = Ext.getCmp('wizard').layout;49 var prev = Ext.getCmp('move-prev');50 var next = Ext.getCmp('move-next');51 var activedId = wizard.activeItem.id;52 if(activeId == 'card-0'){53 if(direction == 1){54 wizard.setActiveItem(1);55 prev.setDisabled(false);56 }57 }else if(activeId == 'card-1'){58 if(direction == -1){59 wizard.setActiveItem(0);60 prev.setDisabled(true);61 }else{62 wizard.setActiveItem(2);63 next.setDisabled(true);64 }65 }else if(activeId == 'card-2'){66 if(direction == -1){67 wizard.setActiveItem(1);68 next.setDisabled(false);69 }70 }71 };6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout
1 6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout 2 //AnchorLayout提供了灵活的布局方式,既可以为items中的每个组件指定与总体布局大小的差值;也可以设置一个比例使子组件可以根据整体自行计算本身的大小; 3 >1.使用百分比进行配置 4 //设置某一个子组件占整体长和宽的百分比; 5 var viewport = new Ext.Viewport({ 6 layout:'anchor', //设置接下来的子组件都为AnchorLayout布局; 7 items:[{ 8 title:'panel1', 9 html:'panel1',10 anchor:'50% 50%' //panel1组件占总体宽度的50%和高度的50%;11 },{12 title:'panel2',13 html:'panel2',14 anchor:'80%' //panel2组件占总体宽度的80%,高度自适应;15 }]16 });17 >2.设置与右侧和底部的边距;18 var viewport = new Ext.Viewport({19 layout:'anchor',20 items:[{21 title:'panel1',22 html:'panel1',23 anchor:'-50 -200' //组件与右侧和底部的相对(绝对)距离;24 },{25 title:'panel2',26 html:'panel2',27 anchor:'-100' //组件与右侧的距离;28 }]29 });30 >3.side布局;31 //在设置父组件和布局内部子组件都设置好width/height和anchorSize属性的前提下;AnchorLayout会记录布局整体与子组件在大小上的差值,为以后调整布局提供依据;32 var viewport = new Ext.Viewport({33 layout:'anchor',34 anchorSize:{width:400,height:300},35 //这是一个包含宽度和高度信息的JSON对象;以此作为以后计算差值的基准;36 items:[{37 title:'panel1',38 html:'panel1',39 width:200,40 height:100,41 anchor:'r b'42 },{43 title:'panel2',44 html:'panel2',45 width:100,46 heig
新闻热点
疑难解答
