helloworld37.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css"/>
<style>
.main-btn {float:right;margin:9px 50px 0 50px;}
.main-btn .x-btn-mc {text-align:center;}
</style>
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-lang-zh_CN.js" charset="UTF-8"></script>
<title>XX系统</title>
</head>
<body>
<script type="text/javascript" src="js/LayoutBorder37.js" ></script>
</body>
</html>
LayoutBorder37.js
Ext.ns("alex.extjs.layout");
alex.extjs.layout.PrettyPanel = function() {
// Ext.QuickTips.init(); //初始化快速提示
var logoutBtn = new Ext.Button({
text : '退出',
handler : function() {
// logoutIndex();
location.href = "login.html";
}
});
var northPanel = new Ext.Panel({
region : 'north', // 指定在北部
// title : '北部面板', // 面板标题
split : true,
height : 45, // 指定高度
collapsible : false, // 可以折叠
collapseMode : 'mini',
frame : true,
// html : '<left>可折叠面板-用户信息</left>',
// tbar:[{text:'顶部工具栏topToolbar'}],
// bbar:[{text: " 按钮1 " },{text: " 按钮2 " }], // 底部工具栏
// html : " 内容 ",
// buttons:[{text: " 按钮3 " },{text: " 按钮4 " }], // footer部工具栏
xtype : "container",
border : false,
layout : "auto",
items : [{
xtype : "box",
autoEl : {
tag : "img",
src : "img/logo.png",
cls : "main-logo",
width : 120,
height : 30
}
}, {
xtype : "splitbutton",
cls : "main-btn",
// iconCls: "x-btn-user",
minWidth : 104,
enabelToggle : true,
pressed : true,
text : "XXX",
menu : new Ext.menu.Menu({
items : [{
text : "修改密码"
// iconCls: "x-btn-lock"
}, {
text : "退出系统",
// iconCls: "x-btn-exit",
handler : function() {
window.location.href = "login.html";
}
}]
})
}]
});
var eastPanel = new Ext.Panel({
region : 'east', // 指定在东部
title : '东部面板',
width : 100,
split : true, // 可调高/宽度
minSize : 80, // 最小高/宽度
maxSize : 400, // 最大高/宽度
html : '可调宽度面板'
});
var southPanel = new Ext.Panel({
region : 'south',
// title: '南部面板',
// height : 80,
// collapseMode : 'mini', // 折叠后是窄边框
// split : true, // 可调高/宽度
// minSize : 40, // 最小高/宽度
// maxSize : 200, // 最大高/宽度
// frame : true,
html : '<center>Copyright © 2021 某某科技有限公司 版权所有</center>'
});
//TreePanel放在westPanel
var tree = new Ext.tree.TreePanel({
loader : new Ext.tree.TreeLoader({
dataUrl : '10-05.tree.txt'
}),
// title: 'west',
region : 'west',
split : false,
border : false,
collapsible : false
//
// width: 120,
// minSize: 80,
// maxSize: 200
});
var root = new Ext.tree.AsyncTreeNode({
text : '偶是根'
});
tree.setRootNode(root);
root.expand();
// 树形配置结束
var westPanel = new Ext.Panel({
title : '西部面板',
region : 'west',
split : true,
collapsible : true,
collapseMode : 'mini',
margins : '0 0 0 5', // 当前组件的西边页边距为5
width : 200,
items : [tree]
});
var cm = new Ext.grid.ColumnModel([{
header : '编号',
dataIndex : 'id',
sortable : true
}, {
header : '名称',
dataIndex : 'name'
}, {
header : '描述',
dataIndex : 'descn'
}]);
var data = [['1', 'name1', 'descn1'], ['2', 'name2', 'descn2'],
['3', 'name3', 'descn3'], ['4', 'name4', 'descn4'],
['5', 'name5', 'descn5']];
var dataSstore = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.ArrayReader({}, [{
name : 'id'
}, {
name : 'name'
}, {
name : 'descn'
}])
});
dataSstore.load();
var grid = new Ext.grid.GridPanel({
// autoHeight : true,
// renderTo: 'grid',
// title:'title',
// store : store,
store :dataSstore,
// layout : 'fit',
cm : cm,
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : dataSstore,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg : "没有记录"
}),
tbar : new Ext.Toolbar(['-', {
text : '添加一行',
handler : function() {
}
}, '-', {
text : '删除一行',
handler : function() {
Ext.Msg.confirm('信息', '确定要删除?', function(btn) {
});
}
}, '-', {
text : '修改',
handler : function() {
}
}])
});
var tabs = new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : '默认',
layout : 'fit',
// html: '内容',
items : [grid]
}, {
title : '标签',
html : '内容'
}, {
title : '可关闭',
html : '内容',
closable : true
}]
});
var centerPanel = new Ext.Panel({
border : false, //
layout : 'fit',
region : 'center', // 边界布局,必须有 center
// html: '',
items : [tabs]
});
var viewport = new Ext.Viewport({ // 生成一个 ExtJS 视窗 组件对象
// renderTo : Ext.getBody(), // 呈现在 Html Body标签中
layout : 'border', // 使用边界布局
items : [northPanel, westPanel, centerPanel, southPanel]
// items:[northPanel, eastPanel, southPanel, westPanel, centerPanel]
});
}
Ext.onReady(alex.extjs.layout.PrettyPanel);
10-05.tree.txt
[
{text:'01',children:[
{text:'01-01',leaf:true},
{text:'01-02',children:[
{text:'01-02-01',leaf:true},
{text:'01-02-02',leaf:true}
]},
{text:'01-03',leaf:true}
]},
{text:'02',leaf:true}
]
logo.png