项目Extjs前台开发模版

今天趁着给大一大二的学生上课，整理下项目的前台源码，便于以后使用：

//<!-- js页面模板 -->
//此模板实现是所有常见的功能，如下拉列表，时间，网页编辑器，都对应一个案例，大家可以模仿开发其他功能。
//下面每个要注意的点我都标注了，仔细粘贴，避免错误,建议大家ctrl+f对同名替换，保证属性一致哈。

var ss = null;

Ext.onReady(function() {
	Ext.BLANK_IMAGE_URL = 'ExtJs/resources/images/default/s.gif';
	Ext.QuickTips.init();
	var sm = new Ext.grid.CheckboxSelectionModel();
	 var smUseableRoleInfo = new Ext.grid.CheckboxSelectionModel();
	 var smChooseRoleInfo = new Ext.grid.CheckboxSelectionModel();
	keyConvert = function() {
		if (event.keyCode == 13 && event.srcElement.type != "button") {
			event.keyCode = 9;
		}
	};
//！！定义整个jsp页面显示顺序，显示查询表单，在是Grid，注意看items，这些属性如selectStockInForm要保证和下面的一一对应，可用ctrl+f查看都有哪些
	new Ext.Viewport({
		layout : 'border',
		items : [selectStockInForm,stockInGrid]
	});
//!!页面定义完成	
	
//!!刚前Grid列表store加载数据，就是我们页面Grid显示的列表，
//以stockInStore为例，大家替换改成自己定义的store,url、root、totalProperty、fields改成自己的参数，
	var stockInStore = new Ext.data.JsonStore({
		proxy : new Ext.data.HttpProxy({
					//改成自己的action，_前缀是struts配置名，后缀是action层对应方法名
					url : 'StockIn_queryStockIn.action'
				}),
		//Grid列表返回对象集合名，set、get方法对应集合名
		root : 'items_StockIn',
		//Grid列表返回集合条数，set、get方法对应其名
		totalProperty : 'totalProperty',
		//Grid列表对应对象的属性，注意是Grid对象属性值，参考对象实体表
		fields : ['pkInId', 'fkGoodId', 'inNum',
					'inDate', 'fkInOperatorId', 'inDesc','state']
			// autoLoad : false
		});
	//上面URL提交传递的参数，start、limit分页属性
	stockInStore.load({
				params : {
					start : 0,
					limit : 20
				}
			});
//!!Grid列表store加载数据完毕
	
//!!用户下拉列表store加载数据开始，和上面一样
	var userStore = new Ext.data.JsonStore( {
		url : "Users_queryUsers.action",
		root : "items_Users",
		totalProperty : "totalProperty",
		fields : [ {
			name : "id",
			mapping : "id"
		}, {
			name : "name",
			mapping : "truename"
		} ]
	})

	userStore.load( {
		params : {
			start : 0,
			limit : 100
		}
	});
//!!用户下拉列表store加载数据结束
	
//！！页面中查询的Form面板开始，注意renderTo、title属性修改
	selectStockInForm = new Ext.form.FormPanel(
			{
				title : '查询条件',
				renderTo : 'stockIn',//要和jsp页面div的id一致
				labelAlign : 'right',
				buttonAlign : 'center',
				layout : 'column',
				region : 'north',
				frame : true,
				collapsible :true,
				defaultType : 'textfield',
				padding : 10,
				hight : 100,
				items : [{
					layout : 'column',
					xtype : 'fieldset',
					title : '入库查询',	//修改成自己的title
					labelAlign : 'right',
					items : [{
								//上面这个{对应的面板列数，就是我们看到的三个列
								columnWidth : .3,
								layout : 'form',
								labelWidth : 80,
								items : [{
									//上面这个{对应的面板行数，对行列修改时，要注意比对{}删除
									//还有就是{}对应的“,”，看清楚是字母的逗号
									fieldLabel : '操作员 ',
									//type类型为下拉列表
									xtype : 'combo',
									anchor : '80%',
									//对应我们要加载的store，用户store看上面
									store : userStore,
									//valueField和上面maping对应name一致
									valueField : "name",
									displayField : "name",
									mode : 'local',
									forceSelection : true,
									emptyText : '--请选择--',
									//传到后台的属性，注意改成自己对象的名和参数
									hiddenName : 'stockIn.fkInOperatorId',
									editable : false,
									triggerAction : 'all',
									//标记此id是唯一的(也可以不做，这里便于区分)，我们后面用这个id获取hiddenName值
									id : 'stockIn.fkInOperatorId.show',
									allowBlank : false	//看清楚，每列（{}末尾）没有“,”,千万小心
								}]
								},{
									columnWidth : .3,
									layout : 'form',
									labelWidth : 80,
									items : [{
										//type类型是文本
										xtype : 'textfield',
										//传到后台的属性，注意改成自己对象的名和参数
										name : 'stockIn.fkGoodId',
										id : 'stockIn.fkGoodId.show',
										fieldLabel : '商品名称',
										allowBlank : true,
										anchor : '80%'
									}]
									},{
										columnWidth : .3,
										layout : 'form',
										labelWidth : 80,
										items : [{
											//type类型是时间类型
											xtype : 'datefield',
											fieldLabel : '最后修改日期',
											id : 'stockIn.inDate.show',
											name : 'stockIn.inDate',
											//页面显示时间类型格式
											format:'Y-m-d',
											editable : false,
											allowBlank : false,
											anchor : '80%'	
									}]
										}]
					}],
				buttons : [{
								text : '查询',
								iconCls : 'icon-accept',
								cls : 'right-part',
								handler : function() {
									//getCmp内对应的值是上面属性的ID，我用+.show做的区分，大家注意
									var createDate = Ext.getCmp('stockIn.inDate.show').getValue();
									if(createDate!=''){
										//做去“-”处理
										createDate=createDate.format('Ymd');
									}
									stockInStore.proxy = new Ext.data.HttpProxy(
											{
												//处理的时间参数要直接由？+属性参数传到后台，参数名对应对象属性
												url : 'StockIn_selectStockIn.action'+'?stockIn.inDate='+createDate
											});
									stockInStore.load( {
												params : {
													start : 0,
													limit : 20,
													//看下面代码区别加.show和不加的区别
													'stockIn.fkGoodId' : Ext.getCmp('stockIn.fkGoodId.show').getValue(),
													//传递参数在start、limit基础上添加除时间外的属性，注意最后一行没有“,”
													'stockIn.fkInOperatorId' : Ext.getCmp('stockIn.fkInOperatorId.show').getValue()
												}
											});
								}
							}, '-', {
								text : '重置',
								iconCls : 'icon-reset',
								handler : function() {
									selectStockInForm.form.reset();
								},
								cls : 'right-part'// ,
							}]
			});
//！！页面中查询的Form面板开始
	
//！！创建用于展示的grid开始，stockInGrid替换成自己的grid名，注意renderTo的修改
	var stockInGrid = new Ext.grid.GridPanel({
		renderTo : 'stockIn',
		store : stockInStore,
		sm : sm,
		id : 'stockInGrid',
		// height : defaultHeight,
		region : 'center',
		keys : [{
					key : [13],
					fn : keyConvert
				}],
				//类似excel的头行说明，所有参数和store加载属性一致，属性和对象实体表名称要一致
				columns : [sm, {
					//隐藏Id属性，
					header : 'pkInId',
					dataIndex : 'pkInId',
					hidden : true,
					sortable : false
				},{
					header : '商品名称',
					sortable : true,
					width : 150,
					dataIndex : 'fkGoodId',
					//类似超链接，使用JavaScript：方法名，下面有对应方法实现
					renderer : function(value) {
						return "<a href=javascript:update() title = '查看'>" + value + "</a>"
						}   //注意这里也是末尾没有“,”
				}, {
					header : '商品数量',
					sortable : true,
					width : 100,
					dataIndex : 'inNum'
				}, {
					header : '入库时间',
					sortable : true,
					width : 100,
					dataIndex : 'inDate'
				}, {
					header : '操作者',
					sortable : true,
					width : 100,
					dataIndex : 'fkInOperatorId'
				}, {
					header : '描述',
					sortable : true,
					width : 100,
					dataIndex : 'inDesc'
				}],
		//列表上方的功能选项
		tbar : [{
			text : '入库登记',
			tooltip : '入库登记',
			iconCls : "icon-add",
			handler : function() {
				//这些之前视频讲过，不做介绍
				addForm.form.reset();
				winTitle = "入库登记";
				addWin.setTitle(winTitle);
				addWin.show();
			}
		}, '-', {
			text : '修改信息',
			tooltip : '修改被选择的登记信息',
			iconCls : "icon-edit",
			handler : function() {
				//和上面超链接一致，指向方法名
				update();
			}
		}, '-', {
			text : '删除信息',
			tooltip : '删除被选择的登记记录',
			iconCls : "icon-del",
			handler : function() {
				_record = stockInGrid.getSelectionModel().getSelections();
				flag = stockInGrid.getSelectionModel().getSelected();
				if (_record.length == 0) {
					Ext.Msg.alert('警告', '请选择你要删除的记录！');
				} else {
					Ext.MessageBox.confirm('确认删除', '你确认要删除该记录吗？',
							function(btn) {
								if (btn == "yes") {
									var jsonData = "";
									// 向Action中传输需要删除的记录的pkInId的拼接字符串，“,”分割
									for (var i = 0; i < _record.length; i++) {
										ss = _record[i].get("pkInId");
										if (i == 0) {
											jsonData = jsonData + ss;
										} else {
											jsonData = jsonData + ","
													+ ss;
										}
									}
									Ext.Ajax.request({
										//对应提交*_下的删除方法
										url : "StockIn_delStockIn.action",
										params : {
											//要传递的拼接参数，String型
											delData : jsonData
										},
										success : function(from, action) {
											stockInStore.reload();
											Ext.Msg
													.alert('成功',
															'删除成功！');

										},
										failure : function(form, action) {
											Ext.Msg
													.alert('失败',
															'删除失败！');
										}
									});
								}
							});
				}
			}
		}],
		bbar : [{
					//分页实现，加载前面的store，使用位置通配符
					xtype : 'paging',
					pageSize : 20,
					//对应Grid列表的那个Store
					store : stockInStore,
					displayInfo : true,
					displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
					emptyMsg : "没有记录"
				}]
	});
//！！创建用于展示的grid结束
	
//！！将id转换为name，我们直接在数据库存储名称，所以方法注释掉
//	function?fishname(val){??
//		return?fishStore.queryBy(function(rec){???
//		return?rec.data.id?==?val;?
//		?}).itemAt(0).data.name;?
//		}
	
//!!添加窗口，内含添加的form表单addForm，名字可不改
	addWin = new Ext.Window({
		layout : 'form',
		width : 650,
		height : 450,
		modal : true,
		resizable : false,
		plain : true,
		closable : false,
		items : addForm
	});

//!!通过窗口，打开表单，无数据提前加载，这是和修改的区别
	var addForm = new Ext.FormPanel({
		labelWidth : 75,
		labelAlign : 'right',
		frame : true,
		bodyStyle : 'padding:5px 5px 0',
		width : 640,
		height : 420,
		waitMsgTarget : true,
		items : [{
					//下面属性和之前的查询Form一样，注意属性name的修改，他是传往后台的属性名
					layout : 'column',
					xtype : 'fieldset',
					title : '入库信息',
					items : [{
						columnWidth : .5,
						layout : 'form',
						labelWidth : 80,
						items : [{
							xtype : 'textfield',
							name : 'stockIn.fkGoodId',
							//这里传参用的ajax，所以id并没有用处，.add只是区别作用
							id : 'stockIn.fkGoodId.add',
							fieldLabel : '商品名称',	
							allowBlank : false,
							anchor : '100%'
						},{
							xtype : 'textfield',
							name : 'stockIn.inNum',
							id : 'stockIn.inNum.add',
							fieldLabel : '商品数量',	
							allowBlank : false,
							anchor : '100%'
						}]
					}]
					},{
						layout : 'column',   
						xtype : 'fieldset',
						title : '备注',
						items : [{
							columnWidth : .9,
							layout : 'form',
							labelWidth : 100,
							items : [{
								//type类型为网页编辑器类型
								xtype : 'htmleditor',
								name : 'stockIn.inDesc',
								id : 'stockIn.inDesc.add',
								fieldLabel : '描述',	
								allowBlank : false,
								anchor : '100%'
							}]
					}]
			}],
						buttons : [{
							text : '保存',
							iconCls : 'icon-save',
							handler : function() {
								if (addForm.form.isValid()) {
									addForm.form.submit( {
												url : 'StockIn_addStockIn.action' ,
												success : function(
														from, action,success) {
													stockInStore.reload();
													Ext.Ghost.msg('保存成功','添加新的入库记录成功！');
													addWin.hide();
												},
												failure : function(
														form, action,success) {
													Ext.Ghost.msg(
															'保存失败','信息填写有误或服务器未响应，请重新尝试');
												},
												waitMsg : '正在保存数据，稍后...'
											});
								} else {
									Ext.Ghost.msg('信息', '请填写完成再提交!');
								}
							}
						}, '-', {
							text : '取消',
							iconCls : 'icon-reset',
							handler : function() {
							addForm.form.reset();
							addWin.hide();
							},
							cls : 'right-part'// ,
						}]
			});
//！！完成添加窗口功能

//！！JavaScript超链接方法
		update = function() {
			var _record = stockInGrid.getSelectionModel().getSelected();
			var flag = stockInGrid.getSelectionModel().getSelections();
			if (flag.length == 1) {
				//得到grid列表某一行的属性值，_record.get()表示得到对应值，并设置为update*做区别，updateForm要使用，注意和grid属性一致
				Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));
				Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));
				Ext.getCmp("updateinNum").setValue(_record.get("inNum"));
				Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));
				winTitle = "修改入库信息";
				updateWin.setTitle(winTitle);
				updateWin.show();
				updateForm.getForm().load();
			} else
				Ext.Msg.alert('错误', '请选择一道要编辑的入库！');
		};	
//！！完成JavaScript超链接方法		
	
//!!修改窗口，内含修改的form表单updateForm，名字可不改，由上面的JavaScript超链接方法得到表单初始值
		updateWin = new Ext.Window({
			layout : 'form',
			width : 650,
			height : 450,
			modal : true,
			resizable : false,
			plain : true,
			closable : false,
			items : updateForm
		});
		
//!!通过窗口，打开表单，数据需要提前加载，由窗口完成		
		var updateForm = new Ext.FormPanel({
			labelWidth : 75,
			labelAlign : 'right',
			frame : true,
			bodyStyle : 'padding:5px 5px 0',
			width : 640,
			height : 420,
			waitMsgTarget : true,
			items : [{
						//下面属性和查询一样，有一点就是属性id要和JavaScript超链接方法定义的参数名一致，就是update*
						layout : 'column',   
						xtype : 'fieldset',
						title : '修改信息',
						items : [{
							columnWidth : .5,
							layout : 'form',
							labelWidth : 80,
							items : [{
								//建议大家和我一样，把原来的粘过来，比对着用，name属性为传往后台的名称，要注意区别
//								Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));
//								Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));
//								Ext.getCmp("updateinNum").setValue(_record.get("inNum"));
//								Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));
								name : 'stockIn.pkInId',
								id : 'updatepkInId',
								xtype : 'hidden'
							},{
								xtype : 'textfield',
								name : 'stockIn.fkGoodId',
								id : 'updatefkGoodId',
								fieldLabel : '商品名称',	
								allowBlank : false,
								anchor : '100%'
							},{
								xtype : 'textfield',
								name : 'stockIn.inNum',
								id : 'updateinNum',
								fieldLabel : '商品数量',	
								allowBlank : false,
								anchor : '100%'
							}]
					}]
			},{
				layout : 'column',   
				xtype : 'fieldset',
				title : '描述',
				items : [{
					columnWidth : .9,
					layout : 'form',
					labelWidth : 100,
					items : [{
						xtype : 'htmleditor',
						name : 'stockIn.inDesc',
						id : 'updateinDesc',
						fieldLabel : '描述',	
						allowBlank : false,
						anchor : '100%'
					}]
			}]
	}],
							buttons : [{
								text : '保存',
								iconCls : 'icon-save',
								handler : function() {
									if (updateForm.form.isValid()) {
										  updateForm.form.submit( {
													url : 'StockIn_updateStockIn.action' ,
													success : function(
															from, action,success) {
														stockInStore.reload();
														Ext.Ghost.msg('保存成功','修改信息成功！');
														updateWin.hide();
													},
													failure : function(
															form, action,success) {
														Ext.Ghost.msg(
																'保存失败','信息填写有误或服务器未响应，请重新尝试');
													},
													waitMsg : '正在保存数据，稍后...'
												});
									} else {
										Ext.Ghost.msg('信息', '请填写完成再提交!');
									}
								}
							}, '-', {
								text : '取消',
								iconCls : 'icon-reset',
								handler : function() {
								updateForm.form.reset();
								updateWin.hide();
								},
								cls : 'right-part'// ,
							}]
				});
//!!完成修改表单

})