本文详细介绍并展示了ExtJS框架中的多种布局方式，包括border、fit、accordion和form布局，同时深入探讨了表格、树形结构及表单组件的使用技巧，通过实际代码示例，帮助读者快速掌握ExtJS的高级特性。
**其中包含了 border 表格布局，fit布局，accordion手风琴效果的布局，form布局，以及树形结构的使用。**
话不多说直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css"/>
<script src="ext-3.2.0/adapter/ext/ext-base-debug.js"></script>
<script src="ext-3.2.0/ext-all-debug.js"></script>
<script>
Ext.onReady(function () {
var data = [ //添加数据
{
id: 1,
name: "小王",
email: "xiaowang@126.com",
sex: "男",
bornDate: "1992-5-6"
}, {
id: 2, name: "小李",
email: "xiaoli@126.com",
sex: "男",
bornDate: "1992-5-6"
}, {
id: 3,
name: "小兰",
email: "xiaolan@126.com",
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日"})
}]);
new Ext.Viewport({ //布局开始
enableTabScroll: true, //允许出现滚动条
layout: "border", //总体采用border布局
items: [{
xtype: "tabpanel", //类型为选项面板
region: "center", //居中
items: [
{
title: "电子邮件",
layout: "border", //border布局
items: [{
region: "west", // 向西
width: 200,
height: 200,
layout: "accordion", //手风琴的布局
layoutConfig: {animate: true}, //添加动画效果
collapsible: true, //可折叠 允许伸缩
items: [{title: "邮件夹"}, {title: "邮件搜索"}, {title: "邮箱管理"}]
},
{
region: "center",//居中
layout: "fit", //填满布局
items: [
new Ext.grid.EditorGridPanel({ //可编辑的表格
cm: colM, store: store,
title: "学生管理",
tbar: [new Ext.Toolbar.TextItem('工具栏'),//添加文本工具栏
{xtype: "tbfill"}, //类型 工具栏文件 将工具栏的的工具移至靠右
//插入代码
{
pressed: false, text: "新窗口", handler: function () { //点击时使用以下函数
//设置树的根节点以及其他其他节点
var root = new Ext.tree.TreeNode({ //创建树的节点
text: "root", //定义一个树节点
id: "root",
checked: false, //定义刚开始的复选框 为空
leaf: false //有没有子节点
});
var c1 = new Ext.tree.TreeNode({
text: "费用相关",
id: "c1",
checked: false,
leaf: false
});
var c2 = new Ext.tree.TreeNode({
text: "目标用户",
id: "c2",
checked: false,
leaf: false
});
var c3 = new Ext.tree.TreeNode({
text: "受理渠道",
id: "c3",
checked: false,
leaf: false
});
root.appendChild(c1); //为root节点添加子节点c1
root.appendChild(c2);
root.appendChild(c3);
for (var j = 1; j < 4; j++) { // 给每个子节点在添加四个子节点
c1.appendChild(new Ext.tree.TreeNode({ //为c1节点在添加子节点
text: "栏目" + j,
checked: false,
leaf: true
}));
c2.appendChild(new Ext.tree.TreeNode({
text: "栏目" + j,
checked: false,
leaf: true
}));
c3.appendChild(new Ext.tree.TreeNode({
text: "栏目" + j,
checked: false,
leaf: true
}));
}
var win = new Ext.Window({ //创建一个新窗口
title: "窗口",
width: 300,
tbar: [{xtype: "tbfill"}, {xtype: "tbbutton", text: "提交"}],//头部文件
collapsible: true,//面板伸缩
height: 300,
layout: {
type: 'vbox', //采用vbox布局
align: 'center' //居中属性
},
items: [
{xtype: "box", html: "<br>关注内容<br>"},
{xtype: "radio", name: "xh", boxLabel: "e9-1套餐", id: "r1"},
{xtype: "radio", name: "xh", boxLabel: "e9-3套餐", id: "r2"}, //采用单选框
{xtype: "box", html: "<br><br>"},
{
xtype: "treepanel", //采用树形结构
width: 200,
autoScroll: true, //允许出现滚动条
autoHeight: true, //自动调节高度
useArrows: true, //是否在树中使用Vista样式箭头，默认为false
animate: true, //动画效果
loader: new Ext.tree.TreeLoader(),//树节点的加载器，默认为Ext.tree.TreeLoader
root: root, //树的根节点
enableDD: false,// 是否支持拖拽效果
containerScroll: true,// 是否支持滚动条
rootVisible: false,//是否隐藏根节点,很多情况下，我false们选择隐藏根节点增加美观性
listeners: { // 添加监听事件
'checkchange': function (node, checked) {
//自动选中子节点node.expand();
node.attributes.checked = checked; //改变复选框的选择
node.eachChild(function (child) { //修改子节点
child.ui.toggleCheck(checked); //子节点保持选中状态
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);//触发 点击节点时 将复选框选中事件
});
}
}
}],
maximizable: false //是否支持最大化});
});
win.show();
}
},
{xtype: "tbseparator"},//类型为工具栏分隔符
{pressed: false, text: "添加"},//开关初始状态为关
{xtype: "tbseparator"},
{pressed: false, text: "保存"}],
bbar: [{xtype: "tbfill"}, {//底部工具栏
xtype: "tbbutton", // 定义一个按钮 名字为button1
text: "button1"
}, {xtype: "tbseparator"}, {xtype: "tbbutton", text: "button2"}],
autoExpandColumn: 3 //自动扩展 下标为3的表格
})]
}]
},
{title: "网络存储"},
{title: "日常安排"}]
}]
});
});
</script>
</head>
<body>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>
</body>
</html>
扫一扫
4832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
