项目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 : '入库查询',//修改成自己的titlelabelAlign : '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列表的那个Storestore : 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();} elseExt.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'// ,}]});//!!完成修改表单})