• 【初学EXT】布局练习


    学以致用是最终目的,今天要提升难度了,先给自己打打气加加油~

    计划:
    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>
  • 相关阅读:
    git命令
    svg学习系列02-简单的svg图形和线条
    svg学习系列01-svg简介
    jQuery分页插件
    svg简介
    css3选择器
    sublime使用
    HTML5新特性
    html新的语义化标签和表单控件
    DOM详解
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3040064.html
Copyright © 2020-2023  润新知