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)、

()()