前言:
layout:‘border’。该布局包含多个字面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,分别是east,south, west, north, center,加入到容器中的字面板需要指定region配置这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置,并且该布局还内建了对面板分割栏的支持。
一.实现界面:
二.实现思路:
1-首先确定整体panel为Viewport,layout:"border"(东南西北中 五个区域)
2-各个部分分别用panel方式搭建
3-从上往下,从左往右依次填充各个panel
4-north难点在于展示靠右显示
5-south难点在于展示间隔控制
6-west难点在于TreePanel
7-center难点在于TabPanel,GridPanel,PagingToolbar
8-east难点在于accordion
9-其中center中:确定整体panel为TabPanel,里面分为3个tab,我们以第一个tab为例,这个tab整体又由GridPanel构成,这个GridPanel里面又分为上,中,下三部分,分别对应Toolbar(工具栏),ColumnModel(列模型),PagingToolbar(分页)
三.代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script src="Ext/adapter/ext/ext-base.js"></script>
<script src="Ext/ext-all.js"></script>
<script src="Ext/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var toobarTop = new Ext.Toolbar({
//工具栏
height: 25,
items: ['->', {
xtype: 'tbtext', //工具栏文本项
text: '欢迎 管理员登录'
},
{
xtype: 'tbseparator', //工具栏分隔符
width: 20
},
{
xtype: 'tbbutton', //按钮
text: '退出'
},
{
xtype: 'tbspacer', //工具栏空白
width: 20
}]
});
var toobarFooter = new Ext.Toolbar({
height: 25,
items: [{
xtype: 'tbtext',
text: '模块名称'
}, '->', {
text: '当前时间:' + new Date().format('Y- m - d')
}, {
xtype: 'tbspacer',
width: 20
}]
});
//列模型
//显示序号
Ext.grid.RowNumberer.prototype = {
id: 'numberer',
header: "序号",
width: 40,
align: "center",
sortable: false,
fixed: true,
menuDisabled: true,
dataIndex: '',
rowspan: undefined,
renderer: function (v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}
return rowIndex + 1;
}
};
//增加复选框 GridPanel中也要增加
var sm = new Ext.grid.CheckboxSelectionModel(