您的位置：首页 > Web前端 > JavaScript

无废话ExtJs 入门教程十六[页面布局：Layout]

2012-06-26 21:06 555 查看
extjs技术交流，欢迎加群（521711109)


首先解释什么是布局：

来自百度词典的官方解释：◎ 布局 bùjú： [distribution;layout] 对事物的全面规划和安排，布：陈设；设置。

我对布局理解是“把**东西放在**位置显示”[动词]。

ok，我们这节课就讲一下怎么样把 ExtJs 的组件，放到我们想放置的位置。

一、常用布局

(1)ContainerLayout：默认布局方式，其他布局继承该类进行扩展功能。显示：将内部组件以垂直方式叠加。如下所示：

组件一.....

组件二.....

(2)FormLayout：产生类似表单的外观。显示：将内部组件以垂直方式叠加。如上所示：

(3)ColumnLayout：将组件以水平方式放置。如下所示：

组件一[第一列] 组件二[第二列] 组件三[第三列]

(4)BorderLayout：一个盒子里摆放5个位置，东、南、西、北、中[即：上下左右中间]。开发的时候经常用来做后台框架的布局，如下所示：

北

西　　　　　　　中　　　　　　　东

　　　　　　　　南

(5)AccordionLayout：手风琴布局，可以折叠的布局。开发的时候常用来对左侧的功能列表进行分类，如下图所示：

折叠状态---

展开状态[包含内容一和二]---

内容一--

内容二--

折叠状态---

(6)FitLayout：强迫子组件填充满容器布局。

(7)TableLayout：表格布局，含有行与列的概念。

二、实例

1.代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Ext/ext-all.js"></script>
<script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
//------ContainerLayout开始------//
var box1 = new Ext.BoxComponent({
autoEl: {
tag: 'div',
style: 'background:red;width:300px;height:30px',
html: 'box1'
}
});
var box2 = new Ext.BoxComponent({
autoEl: {
tag: 'div',
style: 'background:yellow;width:300px;height:30px',
html: 'box2'
}
});
var box3 = new Ext.BoxComponent({
autoEl: {
tag: 'div',
style: 'background:blue;width:300px;height:30px;color:#fff',
html: 'box3'
}
});
var containerlayout = new Ext.Container({
layout: 'form',
items: [box1, box2, box3],
renderTo: 'ContainerLayout'
});
//------ContainerLayout结束-----//
//------FormLayout开始------//
var formlayout = new Ext.Panel({
title: 'FormLayout',
layout: 'form',
items: [
new Ext.form.TextField({ fieldLabel: '用户名' }),
new Ext.form.TextField({ fieldLabel: '密码' }),
new Ext.form.TextField({ fieldLabel: '重复密码' })
],
renderTo: 'FormLayout'
});
//------FormLayout结束------//
//------ColumnLayout开始------//
var ColumnLayout = new Ext.Panel({
width: 600,
title: 'ColumnLayout',
layout: 'column',
items: [
new Ext.form.FormPanel({ title: '第一列', columnWidth: .33, labelWidth: 50, items: [
new Ext.form.TextField({ fieldLabel: '用户名' })]
}),
new Ext.form.FormPanel({ title: '第二列', columnWidth: .33, labelWidth: 50, items: [
new Ext.form.TextField({ fieldLabel: '密码' })]
}),
new Ext.form.FormPanel({ title: '第三列', columnWidth: .34, labelWidth: 80, items: [
new Ext.form.TextField({ fieldLabel: '重复密码' })]
})
],
renderTo: 'ColumnLayout'
});
//------ColumnLayout结束------//
//------BorderLayout开始------//
var BorderLayout = new Ext.Panel({
title: 'BorderLayout',
layout: 'border',
width: 1100,
height: 300,
items: [
new Ext.Panel({ title: '上北', region: 'north', html: '可以放个logo什么的' }),
new Ext.Panel({ title: '下南', region: 'south', html: '版权信息？', autoEl: 'center' }),
new Ext.Panel({ title: '中间', region: 'center', html: '主面板' }),
new Ext.Panel({ title: '左东', region: 'west', html: '树型菜单或是手风琴' }),
new Ext.Panel({ title: '右西', region: 'east', html: '常用功能或是去掉？' })
],
renderTo: 'BorderLayout'
});
//------BorderLayout结束------//
//------AccordionLayout开始------//
var AccordionLayout = new Ext.Panel({
title: 'AccordionLayout',
layout: 'accordion',
height: 200,
items: [
new Ext.Panel({ title: '用户管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '用户管理'} })] }),
new Ext.Panel({ title: '角色管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '角色管理'} })] }),
new Ext.Panel({ title: '系统管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '系统管理'} })] })
],
renderTo: 'AccordionLayout'
});
//------AccordionLayout结束------//
//------FitLayout结束------//
var FitLayout = new Ext.Panel({
title: 'FitLayout',
height: 100,
renderTo: 'FitLayout',
layout: 'fit',
items: [
new Ext.Panel({ bodyStyle: 'background:red', html: '使用了fit布局,填充满' }),
new Ext.Panel({ bodyStyle: 'background:yellow', html: '这个panel不会显示，因为是fit布局' })
]
});
var NoFitLayout = new Ext.Panel({
title: 'NoFitLayout',
height: 100,
renderTo: 'FitLayout',
items: [
new Ext.Panel({ bodyStyle: 'background:yellow', html: '未使用了fit布局,没有填充满' })
]
});
//------FitLayout结束------//
//------TableLayout开始------//
var TableLayout = new Ext.Panel({
title: 'TableLayout',
layout: 'table',
layoutConfig: { columns: 3 },
defaults: {
width: 133,
height: 100,
autoEl: 'center'
},
defaultType: 'panel',
items: [
{ html: '行1列1' },
{ html: '行1列2' },
{ html: '行[1,2]列3', rowspan: 2, height: 180 },
{ html: '行2列[1,2]', colspan: 2, width: 266 }
],
renderTo: 'TableLayout'
});
//------TableLayout结束------//
});
</script>
</head>
<body>
<div id="ContainerLayout" style="float: left; width: 300px">
ContainerLayout：垂直方式放置
</div>
<div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;">
</div>
<div id="ColumnLayout" style="float: left; width: 500px; padding-left: 10px;">
</div>
<div id="BorderLayout" style="padding: 10px 0px; clear: both">
</div>
<div id="AccordionLayout" style="width: 300px; float: left; height: 200px">
</div>
<div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">
</div>
<div id="TableLayout" style="width: 400px; float: left; padding-left: 10px;">
</div>
</body>
</html>


2.效果如下：



3.说明：

(1)fitlayout只能有一个子组件显示，如上190所示，我在里面创建了两个panel，但只有第一个显示。

转载请注明出处：http://www.cnblogs.com/iamlilinfeng
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航