ExtJS2 0开发与实践笔记 2 ——Ext中的Layout
我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。
如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。
在ExtJS2.0实现中，我们可以写成如下代码样式。ExtJS2.0配置方法如下：初识ExtJS
LayoutExt.js
/**//**
* <p>Title: LoonFramework</p>
* <p>Description:Ext的Layout用例</p>
* <p>Copyright: Copyright (c) 2008</p>
* <p>Company: LoonFramework</p>
* <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
* @author chenpeng
* @email：[email protected]
* @version 0.1
*/
LayoutExt = function()...{
//设定布局器及面板
//Ext1.1为Ext.BorderLayout
var Viewport = Ext.Viewport;
//变量设置
var root;
var layout;
//返回LayoutExt操作结果到onReady
return ...{
init: function()...{
root = this;
//初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
layout = new Viewport(...{
//布局方式，'border'
layout: 'border',
items: [ //北
...{
region: 'north', //显示区域
contentEl: 'north', //绑定的content
title: 'North', //名称
split: false,//分割线
collapsible: true, //是否允许折起
//在ie下无此项会报错(firefox无事……),默认分别为此布局左、上、右、下的边距,以此防止越界造成的崩溃。
//也可写作 'Object:数值'的形式，如 margins：{top: 0, left: 0, right:0, bottom: 0}
margins: '0 0 0 0'
}, //西
...{
region: 'west', //显示区域
contentEl: 'west', //绑定的content
title: 'West', //名称
split: true,//分割栏
width: 80, //宽
margins: '0 0 0 0' //在ie下无此项会报错
}, //东
...{
region: 'east', //显示区域
contentEl: 'east', //绑定的content
title: 'East', //名称
width: 80,
split: true,//分割栏
margins: '0 0 0 0' //在ie下无此项会报错
}, //南
...{
region: 'south', //显示区域
contentEl: 'south', //绑定的content
title: 'South', //名称
split: true,//分割栏
margins: '0 0 0 0' //在ie下无此项会报错
}, //中
new Ext.TabPanel(...{
region: 'center',
deferredRender: false,
activeTab: 0, //活动的tab索引
items: [...{
contentEl: 'center1',
title: '中央区域1',
closable: true, //关闭项
autoScroll: true //是否自动显示滚动条
}, ...{
contentEl: 'center2',
title: '中央区域2',
autoScroll: true
}]
})
]
});
}
};
}
();
//加载onReady
Ext.onReady(LayoutExt.init, LayoutExt, true);
LayoutExt.html(定义html页面，设定及引用ext)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt</title>
<!--加载ExtJs资源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js">...
</script>
<script type="text/javascript" src="ext-all.js">...
</script>
<!--我的js-->
<script type="text/javascript" src="LayoutExt.js">...
</script>
<!--样式-->
<style type="text/css">...
html, body {...}{
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div id="north" class="x-layout-inactive-content">
北方
</div>
<div id="west" class="x-layout-inactive-content">
西方
</div>
<div id="east" class="x-layout-inactive-content">
东方
</div>
<div id="south" class="x-layout-inactive-content">
南方
</div>
<div id="center1" class="x-layout-inactive-content">
中央区域1
</div>
<div id="center2" class="x-layout-inactive-content">
中央区域2
</div>
</body>
</html>
显示效果如下图：
我们可以看到，Ext2.0的布局实际上是利用json进行元素标识后在dom元素上嵌套实现的，所以我们也可以很简单的将其他组件插入到layout中去。
LayoutExt2.js
/**//**
*
* <p>Title: LoonFramework</p>
* <p>Description:Ext的内部Layout嵌套用例</p>
* <p>Copyright: Copyright (c) 2008</p>
* <p>Company: LoonFramework</p>
* <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
* @author chenpeng
* @email：[email protected]
* @version 0.1
*/
Ext.onReady(function()...{
//设定布局器及面板
var layout;
var Pane=Ext.Panel;
var Border=Ext.Viewport;
//初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//生成内部布局
var item1 = new Pane(...{
title: '选项1'
});
var item2 = new Pane(...{
title: '选项2'
});
var item3 = new Pane(...{
title: '选项3'
});
//表格
var grid= new Ext.grid.PropertyGrid(...{
title: '表格嵌套',
closable: true,
source: ...{
"(name)": "grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('03/18/2008')),
"tested": false,
"version": .01,
"borderWidth": 1
}
});
layout = new Border(...{
layout: 'border',
items: [...{
region: 'west',
title: 'west',
//此布局采用折叠样式
layout: 'accordion',
collapsible: true,
width: 100,
minWidth: 70,
maxWidth: 150,
split: true,
//注入itme1 to 3
items: [item1, item2, item3]
}, ...{
region: 'center',
title: 'center',
layout:'fit',
collapsible: true,
split:true,
margins:'0 0 0 0',
//注入表格
items:[grid]
}, ...{
title: 'south',
//是否同步收缩
collapsible: true,
//收缩方式
collapseMode: 'mini',
region: 'south',
margins: '0 5 10 5',
height: 50,
split: true
}]
});
});
LayoutExt2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt2</title>
<!--加载ExtJs资源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<!--我的js-->
<script type="text/javascript" src="LayoutExt2.js"></script>
<!--样式-->
<style type="text/css">...
html, body {...}{
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
</
如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。
在ExtJS2.0实现中，我们可以写成如下代码样式。ExtJS2.0配置方法如下：初识ExtJS
LayoutExt.js
LayoutExt.html(定义html页面，设定及引用ext)
显示效果如下图：
我们可以看到，Ext2.0的布局实际上是利用json进行元素标识后在dom元素上嵌套实现的，所以我们也可以很简单的将其他组件插入到layout中去。
LayoutExt2.js
LayoutExt2.html