`

ExtJS做的一个信息管理界面。每一句都带有注释,可以当教科书用

阅读更多

前段时间公司让我们学习ExtJS,学习了一个礼拜,完成了个小练习,思来想去决定做个总结,但是又懒得敲word,于是就在代码上每行都加上注释,以后忘记了就翻开来看看。

在这里给出代码。

完成的功能如图所示。

 

/**
 * 默认页面
 * 
 * @author leaves.qq:1330771552
 */

Ext.define('SupplyManagementDesktop.defaultsWindow', {
	extend : 'Ext.ux.desktop.Module',

	requires : ['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',
			'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],

	id : 'defaultsWindow-win',

	/***************************************************************************
	 * ExtJS控件使用按照如下规则。 首先,创建控件,调用Ext.create
	 * weightName:空间命名空间,args:空间参数,用{}包围,当做对象传入
	 * 
	 * ####################################### 注意JS中有如下语法: var object={
	 * paramter1:value1, paramter2:value2, paramter3:value3 }
	 * object.paramter1可以直接获得value1 #####################################
	 * 
	 * ExtJS中所有空间创建方法都如上
	 * 
	 * Ext.create(String weightName,Mixed args)
	 * 所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象
	 * 
	 */
	// 初始化窗体的方法
	init : function() {
		this.launcher = {
			text : 'Defaults Window',
			iconCls : 'icon-grid',
			// 调用createWindow方法
			handler : this.createWindow,
			scope : this
			// this指向Ext.define(这个方法用来声明命名空间。)定义的命名空间
		};
	},// 初始化窗体的方法结束

	// 创建窗体的方法
	createWindow : function() {
		// 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。(猜测:可能不跟JS一样,属于ExtJS的语法)
		var dataPanel;// 预定义一个GridPanel,用来显示数据
		var innerPanel;// 存放Panel的容器
		var workerPanel;
		var westPanel;
		var deptStore;
		var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体
		var desktop = this.app.getDesktop();

		// 获取窗体,外部最大窗体,具体方法不清楚。
		var win = desktop.getWindow('defaultsWindow-win');

		// 创建按钮bar组件,是上面的几个按钮。
		var buttonBar = Ext.create('Ext.toolbar.Toolbar', {
			dock : 'top',
			items : [{
						xtype : 'button',
						text : '新建',
						iconCls : 'add',
						handler : function() {
							// 自行新建操作,传入一个create字符串用来标示是什么按钮事件,传入dataPanel(注意:上面没有var
							// dataPanel;此处会报错。)因为后面的新建需要用到表格显示的数据(dataPanel.getSelectionModel().getSelection())
							moduleObj.proAction("create", dataPanel,
									workerPanel);
						}
					}, {
						// 分隔符,不解释。
						xtype : 'tbseparator'
					}, {
						xtype : 'button',
						text : '删除',
						iconCls : 'remove',
						handler : function() {
							moduleObj.proAction("delete", dataPanel);
						}
					}, {
						xtype : 'tbseparator'
					}, {
						xtype : 'button',
						text : '复制',
						iconCls : 'copy',
						handler : function() {
							moduleObj.proAction("copy", dataPanel, workerPanel);
						}
					}, {
						xtype : 'button',
						text : '重置检索',
						iconCls : 'reset',
						handler : function() {
							dataPanel.resetSearch();
						}
					}]
		});// 创建按钮bar组件结束

		// 临时创建的一个用来展示的store
		var theStore = Ext.create('Ext.data.Store', {
			fields : [{
						name : 'projectId',
						type : 'String'
					}, {
						name : 'projectCode',
						type : 'String'
					}, {
						name : 'projectName',
						type : 'String'
					}, {
						name : 'startDate',
						type : 'String'
					}, {
						name : 'endDate',
						type : 'string'
					}, {
						name : 'qualityTarget',
						type : 'string'
					}, {
						name : 'projectLeader',
						type : 'string'
					}, {
						name : 'projectStatus',
						type : 'string'
					}, {
						name : 'qualification',
						type : 'string'
					}, {
						name : 'constructionUnit',
						type : 'string'
					}],
			pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个
			// limit和satrt,start不需要指定ExtJS会自动计算,然后传值。
			proxy : {
				type : 'ajax',// 使用传输方式为ajax(ajax是异步执行的操作,即不需要刷新页面即可申请后台资源。)
				method : 'POST',// post和get是HTML中表单(form)提交两种方式,get会在地址栏显示参数,post不显示
				url : '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
						+ 0,

				reader : {// 设置读取方式属性
					type : 'json',// 设置读取方式格式为:json字符串
					root : 'root',// 设置根元素,即读取上面fields种的name中对应值的元素,此处多为元素组,json字符串如:{A:a,B:[{},{},{},………………]}
					totalProperty : 'totalProperty'// 设置总页码
				}
			},
			autoLoad : true
				// 自动读取,即显示绑定该store的组件的时候直接读取数据
		});
		// 创建临时Store结束

		// 创建分页bar组建
		var pagebar = Ext.create('Ext.toolbar.Paging', {
					pageSize : 20,
					store : theStore,
					dock : 'bottom',
					setActive : false,
					refresh : false,
					displayInfo : true,
					plugins : Ext.create('Ext.ux.ProgressBarPager', {})
				});
		// 创建分页bar组建结束

		// 为theGirdPanel创建一个SelectionModel
		var selectionModeltoGridPanel = Ext
				.create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel
		// 初始化gridPanel
		dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', {
					title : '<font color=red>工程详细信息</font>',
					region : 'center',
					width : '100%',
					height : '96%',
					store : theStore,
					selModel : selectionModeltoGridPanel,
					// 一系列行,不解释,也可以var column=[`````````]然后columns:column
					iconCls : 'remove',
					columns : [{
								dataIndex : 'projectId',
								width : 80,
								text : '项目号'
							}, {
								dataIndex : 'projectCode',
								width : 80,
								text : '项目序号'
							}, {
								dataIndex : 'projectName',
								width : 100,
								text : '项目名称'
							}, {
								dataIndex : 'constructionUnit',
								width : 100,
								text : '建设单位'
							}, {
								dataIndex : 'startDate',
								width : 80,
								text : '开工日期'
							}, {
								dataIndex : 'endDate',
								width : 80,
								text : '竣工日期'
							}, {
								dataIndex : 'qualityTarget',
								width : 100,
								text : '质量目标'
							}, {
								dataIndex : 'projectLeader',
								width : 100,
								text : '项目负责人'
							}, {
								dataIndex : 'projectStatus',
								width : 80,
								text : '项目状态'
							}, {
								dataIndex : 'qualification',
								width : 80,
								text : '需要资质'
							}],
					dockedItems : [buttonBar, pagebar]
				});

		// 绑定dataPanel鼠标双击事件。
		dataPanel.on('itemdblclick', function() {
					moduleObj.proAction("update", dataPanel, workerPanel);

				});
		// 初始化gridPanel结束

		// 为下面的部门信息分类栏(grid)创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。
		deptStore = Ext.create('Ext.data.Store', {
					fields : [{
								name : 'deptId',
								type : 'String'
							}, {
								name : 'deptName',
								type : 'String'
							}],
					proxy : {
						type : 'ajax',
						method : 'POST',
						url : '/Training/DeptInfoController/getAllDeptInfo.action',
						reader : {
							type : 'json',// 用json字符串
							root : 'root'
						}
					},
					autoLoad : true
				});

		// 创建部门信息分类栏,
		workerPanel = Ext.create('Ext.grid.Panel', {
					title : '部门信息',
					border : false,
					store : deptStore,
					hideHeaders : true,
					columns : [{
								dataIndex : 'deptId',
								hidden : true,
								sortable : false,
								width : 180
							}, {
								dataIndex : 'deptName',
								sortable : false,
								width : 180
							}]
				});

		// 给部门信息的grid绑定事件,当单击的时候触发事件,此事件用来刷新右侧列表
		workerPanel.on('itemclick', function(grid, record) {
			// 获取当前行的deptId列的值
			var id = record.data.deptId;
			// dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.proxy获取数据来源属性,ataPanel.store.proxy.url获取数据来源属性的URL,
			// 这个方法用来重新设置数据来源的地址,
			// 注意:后面的?deptId是HTML传参方法,地址栏传参。跟form直接传参一样,后台可以接受。
			dataPanel.store.proxy.url = '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
					+ id;
			dataPanel
					.setTitle("<font color=red>"
							+ (workerPanel.getSelectionModel().getSelection())[0].data.deptName
							+ "</font>部门信息");// ExtJS中的标题等字符串属性支持HTML语言,直接设置格式。
			dataPanel.store.load();// dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.load():调用取得的值的load()方法,用来重新加载store数据,实现grid刷新
		});

		// 初始工人信息Panel,同下
		workerPane2 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
			title : 'BBBBBB',// 随便取标题
			border : false,// 没有边框
			store : theStore,
			hideHeaders : true,
			columns : [{
						dataIndex : 'projectName',
						sortable : false,// 不能排序
						width : 180
					}]
		});
		// 初始工人信息Panel,用来实现折叠效果的panel
		workerPanel3 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
			title : 'CCCCCCC',// 随便取标题
			border : false,// 没有边框
			store : theStore,
			hideHeaders : true,// 隐藏grid每列数据的标题
			columns : [{
						dataIndex : 'projectName',
						sortable : false,// 不能排序
						width : 180
					}]
		});

		// 左边伸缩栏
		westPanel = Ext.create("Ext.panel.Panel", {
			collapsible : true,// 这个属性设置此panel容易可以隐藏(最小化)
			title : '分类查看',
			layout : 'accordion',// 这个属性设置此panel容易可以实现折叠效果
			width : 200,
			region : 'west',
			iconCls : 'reset',
			items : [workerPanel, workerPane2, workerPanel3]
				// 放置三个小panel容器,如上定义
			});

		// 创建容器,用来存放整个窗体的组件,并且在下面直接放置到win中。
		theContainer = Ext.create('Ext.container.Container', {
					layout : 'border',
					items : [dataPanel, westPanel]
				});

		// 判断是否已经创建最外边窗体,如果创建了,(JS是弱类型语言,认为null相当于false)
		if (!win) {
			win = desktop.createWindow({ // 所以此处的目的是:如果win已经初始化存在了,那么就不新创建窗体,直接调用下面的show()方法
				// 下面属性不具体解释,详细可以查看API手册
				id : 'defaultsWindow-win',
				title : '工程详细信息设置',
				width : 1100,
				height : 600,
				iconCls : 'icon-grid',
				animCollapse : false,
				constrainHeader : true,
				layout : 'fit',
				items : [theContainer]
					// 把创建好存放所有组件的窗体放置到外围窗体中
			});
		}
		win.show();// 显示窗体。
		return win;// 把窗体的句柄(相当于内存引用)返回
	},
	// 创建窗体的方法结束

	// 显示一个对话框的方法,暂时带有一个用来判断是什么按钮的属性
	proAction : function(btn, dataPanel, workerPanel) {
		var selectData;// 预设一个用来存放被选中的数据的变量
		var innerPanel;
		// 如果选择的是复制
		if ("copy" == btn) {
			if (dataPanel.getSelectionModel().getSelection().length == 0) {
				Ext.hx.msg("提示", "请先选择您要复制的行");
				return;
			}

			selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel
					.getSelectionModel().getCount()
					- 1].data;// 如果是删除的话需要读取被选中的数据,就初始化被selectData。
		}
		// 如果选择的是新建
		if ("create" == btn) {
			// 新建的时候设置选择的行为null,没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。
			selectData = null;
		}

		// 如果选择的是复制
		if ("update" == btn) {
			selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的记录组成的数组。
		}

		// 如果选择的是删除
		if ("delete" == btn) {
			var oneDate;// 预设一个用来存放一条数据进行操作的变量
			var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。
			// 判断如果还没有选择任何行就提示并且返回方法
			if (records.length == 0) {
				Ext.hx.msg("提示", "请先选择您要删除的行");
				return;
			}

			// 遍历所有的数组然后设置里面的各种标志
			var array = new Array();// 预设一个用来存放新的data的数组
			for (var i = 0; i < records.length; i++) {
				oneDate = records[i].data;// 取出其中一条
				oneDate.deleteFlg = true;// 设置删除标志
				array.push(oneDate);// 放置到数组中
			}

			// 用ajax来进行后台交互
			Ext.Ajax.request({
				url : '/Training/myProjectInfoController/deleteProjectInfo.action',
				method : 'POST',
				success : function(res, opts) {// 交互成功的时候
					Ext.hx.msg("提示", '删除成功!');// 提示
					dataPanel.store.load();// 表格数据刷新
				},
				failure : function(res, opts) {
					Ext.hx.msg("提示", '删除失败!');
				},
				params : {
					jsonString : Ext.JSON.encode(array)
					// 调用ExtJS内置对象的方法,把数组转换成json字符串
				},
				scope : this
					// 作用范围本页。//具体不知道,没用。、
			});

			return;// 执行完成操作马上返回,不执行下面代码。
		}

		/* 下面定义一系列用来输入的文本框 */
		deptBoxStore=Ext.create('Ext.data.Store', {
					fields : [{
								name : 'deptId',
								type : 'String'
							}, {
								name : 'deptName',
								type : 'String'
							}],
					proxy : {
						type : 'ajax',
						method : 'POST',
						url : '/Training/DeptInfoController/getAllDeptInfo.action',
						reader : {
							type : 'json',// 用json字符串
							root : 'root'
						}
					},
					autoLoad : true
				});
		// 下面是一个下来选择菜单,用来下拉选择部门。
		var dptBox = Ext.create("Ext.form.field.ComboBox", {
			fieldLabel : '部门选择',
			store :deptBoxStore ,
			displayField : 'deptName',
			valueField : 'deptId',
			allowBlank : false,// 不允许为空
			editable : false,// 不允许编辑
			x : 10,
			y : 20
		});
		//设置上面部门选择的Combox默认值
		deptBoxStore.load({ 
    	callback : function(records) {
    		dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId); 
   		} 
    });
		
		// 各种输入框,制定value(默认值)在没有selectData是null(即if ("create" ==
		// btn)的时候)设置为“”(空字符串),否则分别取出选择行的每一个数据。作为默认数据,
		var projectIdField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '项目号',
					
					x : 10,
					y : 20,
					value : selectData != null ? selectData.projectId : ""
				});
		var projectCodeField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '项目序号',
					
					x : 10,
					y : 50,
					value : selectData != null ? selectData.projectCode : ""
				});
		var projectNameField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '项目名称',
					allowBlank : false,
					blankText : '不可以为空',
					
					x : 10,
					y : 80,
					value : selectData != null ? selectData.projectName : ""
				});
		var constructionUnitField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '建设单位',
					
					x : 10,
					y : 110,
					value : selectData != null
							? selectData.constructionUnit
							: ""
				});
		var startDateField = Ext.create('Ext.form.field.Date', {
					format : 'Y-m-d h:m:s ',
					fieldLabel : '开工日期',
					blankText : '不可以为空',
					allowBlank : false,
					
					x : 10,
					y : 140,
					value : selectData != null
							? selectData.startDate
							: new Date()
				});
		var endDateField = Ext.create('Ext.form.field.Date', {
					format : 'Y-m-d h:m:s ',
					fieldLabel : '竣工日期',
					blankText : '不可以为空',
					allowBlank : false,
					
					x : 10,
					y : 170,
					value : selectData != null
							? selectData.endDate
							: new Date()
				});
		var qualityTargetField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '质量目标',
					
					x : 10,
					y : 200,
					value : selectData != null ? selectData.qualityTarget : ""
				});
		var projectLeaderField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '项目负责人',
					
					x : 10,
					y : 230,
					value : selectData != null ? selectData.projectLeader : ""
				});
		var projectStatusField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '项目状态',
					
					x : 10,
					y : 260,
					value : selectData != null ? selectData.projectStatus : ""
				});
		var qualificationField = Ext.create('Ext.form.field.Text', {
					fieldLabel : '需要资质',
					
					x : 10,
					y : 290,
					value : selectData != null ? selectData.projectStatus : ""
				});

		var submitButton = Ext.create('Ext.button.Button', {
			text : '确定',
			x : 10,
			y : 320,
			value : selectData != null ? selectData.projectStatus : "",
			handler : function() {
				var arr = new Array();
				// 上面说道的JS的定义对象的方法,
				/**
				 * ####################################### 注意JS中有如下语法: var
				 * object={ paramter1:value1, paramter2:value2, paramter3:value3 }
				 * object.paramter1可以直接获得value1
				 * #####################################
				 */
				var data = {
					projectId : projectIdField.getValue(),
					projectCode : projectCodeField.getValue(),
					projectName : projectNameField.getValue(),
					constructionUnit : constructionUnitField.getValue(),
					startDate : startDateField.getValue(),
					endDate : endDateField.getValue(),
					qualityTarget : qualityTargetField.getValue(),
					projectLeader : projectLeaderField.getValue(),
					projectStatus : projectStatusField.getValue(),
					qualification : qualificationField.getValue(),
					deptId : dptBox.getValue(),
					modifyFlg : "update" == btn ? true : false
				};

				// 上面定义的data有了projectId,projectCode,······deptId,modifyFlg这些属性,可以直接data.modifyFlg取得值。
				if (!confirm("确定?")) {// confirm("确定?")弹出对话框,显示确定?点击是的时候返回true,此处判断如果端机否,直接返回方法不执行下面语句。
					return;
				}
				arr.push(data);// 把设置好属性的data对象放置到arr数组中。

				// 用AJAX跟后台交互。
				Ext.Ajax.request({
					url : '/Training/myProjectInfoController/saveProjectInfo.action',
					params : {
						jsonString : Ext.JSON.encode(arr)
					},
					success : function(response) {
						Ext.hx.msg("提示", "成功");
						var dialog = Ext.getCmp('theDialog');// Ext.getCmp(String
						// comID);传入组件ID,返回组件句柄(内存引用)
						dataPanel.store.load(); // 刷新panel不解释
						dialog.close();// 把窗体关闭(不显示)
						dialog.destroy();// 把窗体销毁(清空内存)
					},
					failure : function(response) {// 失败提示
						Ext.hx.msg("提示", "失败");
					}
				});
			}
		});
		var resetButton = Ext.create('Ext.button.Button', {
					text : '重置',
					x : 70,
					y : 320,
					value : selectData != null ? selectData.projectStatus : "",
					handler : function() {
						/*
						 * API上抄来的,不知道什么意思。 up( String selector ) : Container
						 * Walks up the ownerCt axis looking for an ancestor
						 * Container which matches the passed simple selector.
						 */
						this.up('form').getForm().reset();// 查找form上面的form(记住这么用吧,说不清楚。仔细看
						// innerPanel =
						// Ext.create('Ext.form.Panel',
						// {
						// 这句就知道了。)向上找form元素获取form表单,然后重置
					}
				});

		// 创建用来进行输入的文本框数组
		/**
		 * 此处使用的是Ext.form.Panel目的是为了上面的this.up('form').getForm().reset();
		 */
		innerPanel = Ext.create('Ext.form.Panel', {// 创建一个表单控件,
			id : 'innerPanel',
			height : "100%",
			width : "100%",
			layout : {
				type : 'absolute'
			},
			id : 'innerPanel',
			waitMsgTarget : true,// 显示错误提示的小叹号

			fieldDefaults : {
				labelWidth : 85,
				msgTarget : 'side'// 错误提示的字体
			},
			items : [dptBox, projectCodeField, projectNameField,
					constructionUnitField, startDateField, endDateField,
					qualityTargetField, projectLeaderField, projectStatusField,
					qualificationField, submitButton, resetButton]
		});

		// 准备好一个用来显示窗体的dialog,实际上是一个窗体
		var dlalog = Ext.create('Ext.window.Window', {
			id : 'theDialog',
			title : '要点击之后显示的窗体',
			height : 500,
			width : 300,
			layout : 'fit',
			items : [innerPanel],
			modal : true
				// 模态窗体,显示的时候不允许操作后面的控件。
			});
		dlalog.show();
	}
		// 显示一个对话框的方法结束
});

 


分享到:
评论
1 楼 923080512 2011-12-09  
   谢谢

相关推荐

Global site tag (gtag.js) - Google Analytics