学以致用是最终目的,今天要提升难度了,先给自己打打气加加油~
计划:
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>