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.TabPanel 26       >.Ext.Tip 27       >.Ext.Window    //嵌套布局; 28       >.Ext.form.FieldSet   //表单布局; 29       >.Ext.form.FormPanel  //表单布局; 30       >.Ext.tree.TreePanel 31       >.Ext.grid.GridPanel 32         >.Ext.grid.EditorGridPanel 33         >.Ext.grid.PropertyGrid 34  35   //所有布局类也有一个共同的超类Ext.layout.ContainerLayout 36   //凡是该超类的子类都可以对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      //表格布局 47  48 6.2 最简单的布局--FitLayout 49   //自动适应页面大小 50   Ext.onReady(function(){ 51     var store = new Ext.data.ArrayStore({ 52       fields:[‘id‘,‘name‘,‘desc‘], 53       data:[[‘1‘,‘name1‘,‘desc1‘]]        //数据存储器; 54     }); 55  56     var grid = new Ext.grid.GridPanel({   //创建带数据的表格; 57       title:‘grid‘, 58       viewConfig:{forceFit:true}, 59       store:store, 60       columns:[ 61         {header:‘id‘,dataIndex:‘id‘}, 62         {header:‘名称‘,dataIndex:‘name‘}, 63         {header:‘描述‘,dataIndex:‘desc‘} 64       ], 65       tbar:new Ext.Toolbar([‘添加‘,‘修改‘,‘删除‘]), 66       bbar:new Ext.PagingToolbar({ 67         pageSize:15, 68         store:store 69       }) 70     }); 71  72     var viewport = new Ext.Viewport({ 73       layout:‘fit‘,   //指向自适应布局; 74       items:[grid]    //将表格引入布局; 75     }); 76   }); 77  78 6.3 常用的边框布局--BorderLayout 79   //FitLayout每次只能使用一个子组件;而现实中我们使用最多的是Ext.layout.BorderLayout布局; 80   var viewport = new Ext.Viewport({ 81     layout:‘border‘,  //指向为BorderLayout布局; 82     items:[ 83       {region:‘north‘,html:‘north‘,height:120}, //region:指定组件的位置;html:组件内容; 84       {region:‘south‘,html:‘south‘,height:30}, 85       {region:‘west‘,html:‘west‘,width:40}, 86       {region:‘east‘,html:‘east‘,width:100}, 87       {region:‘center‘,html:‘center‘}       //center的大小是其他4个部分设置好之后计算出来的;不可以省略; 88     ] 89   }); 90  91 6.3.1 设置子区域的大小 92   //可以直接设置north与south的高度和west与east的宽度; 93  94 6.3.2 使用split并限制它的的范围 95   //使用split参数,用户可以自行拖放来改变某一个区域的大小; 96   //使用minSize和maxSize将限制用户拖放的范围; 97   var viewport = new Ext.Viewport({ 98     layout:‘border‘, 99     items:[100       {region:‘north‘,html:‘north‘,split:true},         //顶部可以上下拖动改变大小;101       {region:‘west‘,html:‘west‘,width:100,split:true,minSize:80,maxSize:120}, 102       //左侧可以左右拖动改变大小; 但宽度的范围在80~120之间;103       {region:‘center‘,html:‘center‘}104     ]105   });106 107 6.3.3 子区域的展开和折叠--collapsible108   //属性collapsible:true;这个属性激活了区域折叠功能;109   //title:‘west‘;折叠区域的标题;必须跟collapsible一起设置;110   items:[111     {region:‘north‘,html:‘north‘,heith:100,title:‘顶部‘,collapsible:true},112     ...113   ]114 115 6.4 制作伸缩菜单布局--Accordion(折叠布局)116   //BorderLayout布局下嵌套的Accordion布局;117   var viewport = new Ext.Viewport({118     layout:‘border‘,        //第一层是BorderLayout布局;119     items:[{120       region:‘west‘,        //子组件左侧区域;121       width:200,122       layout:‘accordion‘,   //子组件是Accordion(折叠)布局;123       split:true,124       layoutConfig:{        //布局配置信息;125         titleCollapse:true, //点击标题也可折叠;126         animate:true,       //折叠动画;127         activeOnTop:false   //打开的组件是否置顶;128       },129       items:[{              //孙组件;折叠布局;130         title:‘第一栏‘,131         html:‘第一栏‘132       },{133         title:‘第二栏‘,134         html:‘第二栏‘135       }]136     },{137       region:‘center‘,      //子组件center区域;138       html:‘center区域‘139     }]140   });141 142 6.5 实现操作向导的布局--CardLayout143   //为CardLayout配置几个子面板,每次只显示其中一个;144   var viewport = new Ext.Viewport({145     layout:‘border‘,146     items:[{147       region:‘west‘,148       id:‘wizard‘,149       width:200,150       title:‘xx向导‘,151       layout:‘card‘,152       activeItem:0,153       bodyStyle:‘padding:15px‘,154       defaults:{155         border:false156       },157       bbar:[{158         id:‘move-prev‘,159         text:‘上一步‘,160         handler:function(){161             navHandler(-1);162         },163         disabled:true164       },‘->‘,{165         id:‘move-next‘,166         text:‘下一步‘,167         handler:function(){168             navHandler(1);169         },170       }],171       items:[{172         id:‘card-0‘,173         html:‘<h1>欢迎使用向导</h1><p>1/3</p>‘174       },{175         id:‘card-1‘,176         html:‘<p>2/3</p>‘177       },{178         id:‘card-2‘,179         html:‘<p>完成</p>‘180       }]181     },{182         region:‘center‘,183         split:true,184         border:true185     }]186   });187   //设置navHandler函数  (带注释!)188   var navHandler = function(direction){189     var wizard = Ext.getCmp(‘wizard‘).layout;190     var prev = Ext.getCmp(‘move-prev‘);191     var next = Ext.getCmp(‘move-next‘);192     var activedId = wizard.activeItem.id;193     if(activeId == ‘card-0‘){194       if(direction == 1){195         wizard.setActiveItem(1);196         prev.setDisabled(false);197       }198     }else if(activeId == ‘card-1‘){199       if(direction == -1){200         wizard.setActiveItem(0);201         prev.setDisabled(true);202       }else{203         wizard.setActiveItem(2);204         next.setDisabled(true);205       }206     }else if(activeId == ‘card-2‘){207       if(direction == -1){208         wizard.setActiveItem(1);209         next.setDisabled(false);210       }211     }212   };213 214 6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout215   //AnchorLayout提供了灵活的布局方式,既可以为items中的每个组件指定与总体布局大小的差值;也可以设置一个比例使子组件可以根据整体自行计算本身的大小;216   >1.使用百分比进行配置217   //设置某一个子组件占整体长和宽的百分比;218   var viewport = new Ext.Viewport({219     layout:‘anchor‘,        //设置接下来的子组件都为AnchorLayout布局;220     items:[{221       title:‘panel1‘,222       html:‘panel1‘,223       anchor:‘50% 50%‘      //panel1组件占总体宽度的50%和高度的50%;224     },{225       title:‘panel2‘,226       html:‘panel2‘,227       anchor:‘80%‘          //panel2组件占总体宽度的80%,高度自适应;228     }]229   });230   >2.设置与右侧和底部的边距;231   var viewport = new Ext.Viewport({232     layout:‘anchor‘,233     items:[{234       title:‘panel1‘,235       html:‘panel1‘,236       anchor:‘-50 -200‘     //组件与右侧和底部的相对(绝对)距离;237     },{238       title:‘panel2‘,239       html:‘panel2‘,240       anchor:‘-100‘         //组件与右侧的距离;241     }]242   });243   >3.side布局;244   //在设置父组件和布局内部子组件都设置好width/height和anchorSize属性的前提下;AnchorLayout会记录布局整体与子组件在大小上的差值,为以后调整布局提供依据;245   var viewport = new Ext.Viewport({246     layout:‘anchor‘,247     anchorSize:{width:400,height:300},248     //这是一个包含宽度和高度信息的JSON对象;以此作为以后计算差值的基准;249     items:[{250       title:‘panel1‘,251       html:‘panel1‘,252       width:200,253       height:100,254       anchor:‘r b‘255     },{256       title:‘panel2‘,257       html:‘panel2‘,258       width:100,259       height:200,260       anchor:‘r b‘261     }]262   });263   //AnchorLayout首先获得父组件的宽度/高度,以及每个子组件的宽度/高度,然后将子组件与父组件的宽度/高度之差分别保存起来;根据改变后父组件的大小,计算出子组件当前的宽度和高度;264   >4.同时使用百分比和边距265   var viewport = new Ext.Viewport({266     layout:‘anchor‘,267     items:[{268       title:‘panel1‘,269       html:‘panel1‘,270       anchor:‘-100 40%‘     //组件距右侧100px不变,高度是整体的40%;271     },{272       title:‘panel2‘,273       html:‘panel2‘,274       anchor:‘-200 60%‘     //同上;275     }]276   });277   >5.利用AbsoluteLayout进行绝对定位278   //AbsoluteLayout是AnchorLayout的一个子类;继承了AnchorLayout的所有特性;279   //AnchorLayout布局下的子组件都是自上而下竖直排列的;而AbsoluteLayout正是可以解决这个问题;280   var viewport = new Ext.Viewport({281     layout:‘absolute‘,      282     //以下组件进行绝对定位;并使用AnchorLayout确定每个组件的相对大小;283     items:[{284       title:‘panel1‘,285       html:‘panel1‘,286       x:50,                 //子组件左上角距父组件的距离;287       y:0,288       anchor:‘-200 40%‘     //子组件相对于父组件的大小;289     }]290   });