学以致用是最终目的，今天要提升难度了，先给自己打打气加加油~
计划：
1、设计界面（尽量整合所学的布局知识）
2、界面实现
3、记录难点
4、调整样式（实现过程中才发现样式更改是比较不好调的，所以这一次暂不作处理,摘出作为专门学习的章节）
设计：
使用软件：Diagram Designer
设计图：
实现界面：
基本按照设计界面完成了实现界面，展示如下：
看着它觉得很有成就感
实现思路：
1、首先确定整体panel为Viewport layout: "border"
2、其次以panel方式搭建好border各部分
3、从上往下，从左往右更改或填充各个panel
4、north 难点在于使展示靠右显示
5、south 难点在于展示间的间隔控制
6、west 难点在于TreePanel
7、center 难点在于TabPanel、GridPanel、PagingToolbar
8、其中GridPanel
先能展示数据
再增加序号
在增加复选框
在增加头部工具条
工具条增加下拉列表
数据增加链接
在增加底部工具栏
以上提及难点控件，我会在后续文章中详细罗列学习，他们都是常用的重要控件
现在先把整体代码贴出
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css"
href="EXT/resources/css/ext-all.css" />
<script type="text/javascript" src="EXT/ext-base.js"></script>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/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 : 'tbspacer',
width : 20
}, {
text : '退出'
}, {
xtype : 'tbspacer',
width : 20
} ]
})
var panelTop = new Ext.Panel({
id : "panelTop",
region : 'north',
height : 25,
// margins: '5 0 0 5',//上 右 下 左
tbar : toobarTop
});
var toobarFooter = new Ext.Toolbar({
height : 25,
items : [ {
xtype : 'tbtext',
text : '模块名称'
}, '->', {
text : '当前时间：2013-04-22 13:50:35'
}, {
xtype : 'tbspacer',
width : 20
} ]
});
var panelFooter = new Ext.Panel({
id : "panelFooter",
region : 'south',
height : 25,
tbar : toobarFooter
});
var panelLeft = new Ext.Panel({
id : "panelLeft",
// title: "数据菜单",
region : 'west',
width : 160,
minWidth : 50,
maxWidth : 250,
// collapsible: true, //可收缩
split : true, //可改变框体大小
html : "<div id=\"treeDiv\"> </div>"
});
/*
var panelCenter = new Ext.GridPanel({
id:"panelCenter",
region: 'center',
collapsible: true, //可收缩
split: true, //可改变框体大小
html:"centerPanel content"
});
*/
//列模型
// 显示序号
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();
//单选
// var sm = new Ext.grid.CheckboxSelectionModel({singleSelect: true});
//列模型中的dataIndex 必须和Human结构中的name 属性值一一对应
var cm = new Ext.grid.ColumnModel(
[
Ext.grid.RowNumberer.prototype,
sm,
{
header : "姓名",
width : 80,
dataIndex : "Name",
tooltip : "这是您的姓名"
},//dataIndex表示记录结构中的name属性值。
{
header : "性别",
width : 40,
dataIndex : "Sex",
align : "center"
},
{
header : "生日",
width : 150,
format : "Y-m-d",
dataIndex : "Birthday",
renderer : Ext.util.Format.dateRenderer("Y-m-d")
//格式化日期
},
{
header : "学历",
width : 80,
dataIndex : "Education",
align : "center"
},
{
id : "memo",
header : "备注",
dataIndex : "Memo"
},
{
header : "操作",
width : 100,
dataIndex : "rowId",
menuDisabled : true,
renderer : function(v) {
var modify = "<a href='modify?newsId=" + v
+ "'>修改</a>";
var remove = "<a href='delete?newsId=" + v
+ "'>删除</a>";
return "<span align='center'>" + modify
+ " " + remove + "</span>";
}
} ]);
//数据
var data = [ {
name : "李赞红",
sex : "男",
birthday : Date.parseDate("1979-04-11", "Y-m-d"),
edu : "本科",
memo : "无备注"
}, {
name : "陈南",
sex : "男",
birthday : Date.parseDate("1987-08-06", "Y-m-d"),
edu : "本科",
memo : "一个小帅哥哈"
}, {
name : "易珊静",
sex : "女",
birthday : Date.parseDate("1980-05-12", "Y-m-d"),
edu : "本科",
memo : "无备注"
}, {
name : "张海军",
sex : "男",
birthday : Date.parseDate("1980-12-11", "Y-m-d"),
edu : "本科",
memo : "北大青鸟最帅的老师"
} ];
//Proxy
var proxy = new Ext.data.MemoryProxy(data);
//Record 定义记录结果
var Human = Ext.data.Record.create([ {
name : "Name",
type : "string",
mapping : "name"
}, {
name : "Sex",
type : "string",
mapping : "sex"
}, {
name : "Birthday",
type : "string",
mapping : "birthday"
}, {
name : "Education",
type : "string",
mapping : "edu"
}, {
name : "Memo",
type : "string",
mapping : "memo"
} ]);
//Reader
var reader = new Ext.data.JsonReader({}, Human);
//Store
var tableInfo = new Ext.data.Store({
proxy : proxy,
reader : reader
});
tableInfo.load();
var cities = [ [ 1, "北京" ], [ 2, "西安" ], [ 3, "天津" ], [ 4, "河北" ] ];
var proxy = new Ext.data.MemoryProxy(cities);
var City = Ext.data.Record.create([ {
name : "cid",
type : "int",
mapping : 0
}, {
name : "cname",
type : "string",
mapping : 1
} ]);
var reader = new Ext.data.ArrayReader({}, City);
var comboStore = new Ext.data.Store({
proxy : proxy,
reader : reader,
autoLoad : true
//即时加载数据
});
//store.load();
var combo = new Ext.form.ComboBox({
triggerAction : "all",
width : 80,
store : comboStore,
displayField : "cname",
valueField : "cid",
mode : "local",
emptyText : "请选择城市"
});
//顶部工具栏
var toolsbarTop = new Ext.Toolbar({
autoHeight : true,
Width : true,
items : [ {
text : '第一行',
tooltip : ''
}, {
text : '下一行'
}, {
text : '上一行'
}, '-', {
text : '全选'
}, {
text : '全不选'
}, {
xtype : 'tbseparator'
}, { // or '-' 在工具栏中的两个项目之间添加一个垂直的分隔栏
text : '反选'
}, '->',//在工具栏的两个项目之间添加一个贪婪的(100% 宽度)水平空白区
{
xtype : 'tbtext',
text : '显示条件'
}, combo, {
xtype : 'tbspacer',
width : 20
}, '-', {
xtype : 'tbtext',
text : '查询条件'
}, {
xtype : 'textfield',
name : 'field1',
emptyText : 'enter search term'
}, {
text : '检索',
tooltip : ''
}, {
xtype : 'tbspacer',
width : 30
} ]
});
//底部工具栏
//然后有一个pagingToolbar
var ptb = new Ext.PagingToolbar({
pageSize : 20,
store : tableInfo,
displayInfo : true,
displayMsg : "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
emptyMsg : "没有记录"
});
var tabPanelOne = new Ext.grid.GridPanel({
id : "tabPanelOne",
title : "中国公民",
tbar : toolsbarTop,
bbar : ptb,
cm : cm,
sm : sm,//复选框
store : tableInfo,
autoExpandColumn : "memo" //自动伸展，占满剩余区域
});
var panelCenter = new Ext.TabPanel({
id : "panelCenter",
region : 'center',
collapsible : true, //可收缩
split : true, //可改变框体大小
bodyBorder : true,
activeTab : 0, // index or id
items : [ tabPanelOne, {
title : 'Tab 2',
html : 'This is tab 2 content.'
}, {
title : 'Tab 3',
html : 'This is tab 3 content.'
} ]
});
//整体Ext.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。在一个页面中只允许出现一个Viewport实例
var panel = new Ext.Viewport({
id : "allPanel",
renderTo : document.body,
layout : "border",
bodyBorder : true,
defaults : {
// bodyStyle: "background-color:yellow;",
frame : true
//渲染面板
// bodyPadding: 15
},
items : [ panelTop, panelFooter, panelLeft, panelCenter ]
});
var panelTree = new Ext.tree.TreePanel({
id : "panelTree",
width : 140,
el : "treeDiv",//应用到的html元素id
animate : true,//以动画形式伸展,收缩子节点
title : "Extjs静态树",
collapsible : true,
rootVisible : true,//是否显示根节点
autoScroll : true,
autoHeight : true,
lines : true,//节点之间连接的横竖线
loader : new Ext.tree.TreeLoader(),//
root : new Ext.tree.AsyncTreeNode({
id : "root",
text : "根节点",//节点名称
expanded : true,//展开
leaf : false,//是否为叶子节点
children : [ {
text : '子节点一',
leaf : true
}, {
id : 'child2',
text : '子节点二',
children : [ {
text : "111"
} ]
} ]
})
});
panelTree.render();//不要忘记render()下,不然不显示哦
});
</script>
</head>
<body>
<div id="a"></div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
