extjs常见布局特点以及可编辑表格详解
/*
* 常见布局特点总结：
column列布局把整个容器看成1列，放入子元素的时候，可以通过指定columnFWidth(百分比)或width(绝对像素的方式指定宽度);
border布局分为：east,south、west、north、center，其中center区域必须设置;
fit布局，子元素自动填满父容器；
accordion布局（折叠布局）：布局中元素是可以折叠的;
Table布局由类Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素按照类似普通html标签<table>排列。
*/
1.编写如下html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="script/column.js">
</script>
<script type="text/javascript" src="script/accordion.js"></script>
<script type="text/javascript" src="script/table.js"></script>
<script type="text/javascript" src="script/editorgrid.js"></script>
</head>
<body>
<div id="hello"></div>
<div id="hello1"></div>
<div id="hello2"></div>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>
<div id="grid3"></div>
</body>
</html>
2.编写
accordion.js(折叠布局js)
Ext.onReady(function() {
new Ext.Panel({
renderTo:"hello1",
title:"容器组件",
layout:"accordion",
width:500,
height:300,
layoutConfig:{
animate:true
},
items:[
{title:"子元素1",html:"元素1内容"},
{title:"子元素2",html:"元素2内容"},
{title:"子元素3",html:"元素3内容"},
{title:"子元素4",html:"元素4内容"}
]
});
});
column.js(列布局js)
Ext.onReady(function() {
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[
{title:"列1",width:100,html:"<div>hello</div>"},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4",width:98}
]
});
});
table.js( 表格布局.js)
/*
* layoutConfig使用columns指定父容器分成3列，
* 子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。
*/
Ext.onReady(function() {
new Ext.Panel({
renderTo:"hello2",
title:"容器组件",
layout:"table",
width:500,
height:200,
layoutConfig:{
columns:3
},
items:[
{title:"子元素1",html:"这子元素1内容",rowspan:2,height:100},
{title:"子元素2",html:"这子元素2内容",colspan:2,height:100},
{title:"子元素3",html:"这子元素3内容",height:100},
{title:"子元素4",html:"这子元素4内容",height:100}
]
});
});
editorgrid.js(可编辑表格.js)
Ext.onReady(function() {
/**
* 可编辑表格
*/
var data = [{
id : 1,
name : "小王",
email : "[email protected]",
sex : "男",
bornDate : "1992-5-6"
}, {
id : 2,
name : "小李",
email : "[email protected]",
sex : "男",
bornDate : "1992-5-6"
}, {
id : 3,
name : "小兰",
email : "[email protected]",
sex : "女",
bornDate : "1993-3-3"
}];
var store = new Ext.data.JsonStore({
data : data,
fields : ["id", "name", "email", "sex", {
name : "bornDate",
type : "date",
dateFormat : "Y-n-j"
}]
});
var colM = new Ext.grid.ColumnModel([{
header : "姓名",
dataIndex : "name",
sortable : true,
editor : new Ext.form.TextField()
}, {
header : "性别",
dataIndex : "sex",
sortable : true,
editor : new Ext.form.ComboBox({
transform : "sexList",
triggerAction : "all",
lazyRender : true
})
}, {
header : "邮件",
dataIndex : "email",
sortable : true,
editor : new Ext.form.TextField()
}, {
header : "出生日期",
dataIndex : "bornDate",
renderer : Ext.util.Format.dateRenderer("Y年m月d日"),
sortable : true,
editor : new Ext.form.DateField({
format : "Y年m月d日"
})
}]);
var grid = new Ext.grid.EditorGridPanel({
renderTo : "grid3",
cm : colM,
store : store,
title : "学生管理 ",
width : 500,
height : 200,
autoExpandColumn : 3
});
});