ExtJs 布局学习笔记

1、BorderLayout布局

例：

var viewPort=new Ext.Viewport({  layout:'border',  items:[{   region:'north',   html:'<h1>dwadwadw</h1>'  },{   region:'west',   html:'<h1>dwadwadw</h1>'  },{   region:'center',   html:'<h1>dwadwadw</h1>'  }]   });  

以上用Viewport类对整体页面进行布局，

layout:是布局采用的方式：border：表示使用了BorderLayout的边界布局方式。

将网页分为东、南、西、北、中----------使用region来为组件布局。

north:上---west:左---center:中间---south:下---east:右

注：center:必须有，不能省略。中间的center大小是通过其他部分计算的。

(1)、north、south只能设置高度west、aset只能设置宽度

(2)、split:允许用户自行拖放改变某一个区域的大小。

split:true 允许改变大小

minSize:最小大小

maxSize:最大大小

  var viewport = new Ext.Viewport({        layout: 'border',        items: [{region:'north',html:'a',split:true},    {region:'west',html:'v',split:true},    {region:'center',html:'a'}]    });

(3)、设置区域的折叠效果

var viewport = new Ext.Viewport({        layout: 'border',        items: [{region:'north',html:'a',split:true},    {region:'west',html:'v',split:true,title:'wesi',collapsible:true},    {region:'center',html:'a'}]    });

主要：collapsible:true 折叠按钮式出现在标题部分的，所以前边的title标题必须存在

----------------------------------------------------------------------

2、FitLayout布局

需求：页面中的grid 、要求随页面大小的变化而变化

Ext.QuickTips.init();var data=[['client_setup1','安装包','3.0.0.1','2014.07.31','是'],['client_setup2','安装包','3.0.0.1','2013.06.31',''],['client_setup3','插件包','3.0.0.1','2012.05.31','是'],['client_setup4','插件包','3.0.0.1','2011.04.31','']  ];var sm=new Ext.grid.CheckboxSelectionModel({checked:true   });var cm=new Ext.grid.ColumnModel([sm,{header:'名称',dataIndex:'name'},{header:'类型',dataIndex:'type'},{header:'版本',dataIndex:'version'},{header:'上传时间',dataIndex:'time'},{header:'当前升级包',dataIndex:'nowPackage'} ]);var store = new Ext.data.Store({proxy:new Ext.data.MemoryProxy(data),reader:new Ext.data.ArrayReader({},[{name:'name'},{name:'type'},{name:'version'},{name:'time'},{name:'nowPackage'}])});store.load();var tbar=new Ext.Toolbar([{text:"添加",id:"add",iconCls:'add',handler:function(){add();}},{text:"查看",id:"view",iconCls:'view',handler:function(){add();}},{text:"删除",id:"delete",iconCls:'delete',handler:function(){add();}}  ]);var grid=new Ext.grid.GridPanel({viewConfig: {forceFit: true},store:store,cm:cm,sm:sm,tbar:tbar});   var viewport = new Ext.Viewport({        layout: 'fit',        items: [grid]    });

----------------------------------------------------------

viewConfig : {<p> forceFit : false,  //false表示不会自动按比例调整适应整个grid，<span style="color:#ff00;">true</span>表示依据比例自动智能调整每列以适应grid的宽度，<span style="color:#ff00;">阻止水平滚动条的出现</span>。dataCM(ColumnModel)中任意width的设置可覆盖此配置项。</p><p>          autoFill : false   //false表示按照实际设置宽度显示每列，<span style="color:#ff00;">true</span>表示当grid创建后自动展开各列，自适应整个grid.且，还会对超出部分进行缩减，让每一列的尺寸适应grid的宽度大小，<span style="color:#ff00;">阻止水平滚动条的出现</span>。</p>       }

----------------------------------------------------------

3、制作伸缩菜单的布局----Accordion

                  var viewport = new Ext.Viewport({        layout: 'border',        items: [{region:'north',html:'a',split:true},                {                    region:'west',                    width:200,                    layout:'accordion',                    layoutConfig:{                        titleCollapse:true,                        animate:true,                        activeOnTop:false                        },                    items:[{                                title:'第一栏',                                html:'第一栏'                           },                           {                               title:'第二栏',                               html:'第二栏'                               },                           {                               title:'第三栏',                               html:'第三栏'                               }]                },{                 region:'center',<pre name="code" class="javascript">                 html:'grid'}]    }); 

(1)、accordion没有提供默认的标题，不设置标题是不会出错的。

(2)、layoutConfig 与布局有关的配置参数都写在其中,这也是在Ext.Conainer中定义好的。在随后的布局中会自动赋值给对应的layout实例。

        * titleCollapse:默认为true,单击标题就可以折叠子面板.若为false,就只能通过单击右键的图标折叠面板。

        *animate：展开和折叠时是否使用动画效果

        *activeOnTop：默认为false执行展开和折叠操作后，子面板的顺序不会改变。

                                   true：会随着展开和折叠的顺序而改变，展开的面板总会在最上面。

4、操作向导的布局--------CardLayout

5、控制大小和位置的布局--------AnchorLayout 和AbsoluteLayout

(3)、

()()