jsp页面如下：materialsDetail.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head><script type="text/javascript" src="${ctx}/resources/loader/yepnope.min.js"></script> <script type="text/javascript"> var businessId = "${businessId}"; var recordId = "${recordId}"; pagesize=eval('(${fields.pagesize==null?"{}":fields.pagesize})'); yepnope({ load:[ "${ctx}/resources/extjs/resources/css/ext-all.css", // "${ctx}/resources/extjs/resources/css/yourtheme.css", "${ctx}/resources/css/gridStyle.css", "${ctx}/resources/extjs/adapter/ext/ext-base.js", "${ctx}/resources/extjs/ext-all.js", "${ctx}/resources/extjs/ext-lang-zh_CN.js", "${ctx}/resources/extjs/ux/TabCloseMenu.js", "${ctx}/resources/extjs/ux/Portal.js", "${ctx}/resources/extjs/ux/SearchField.js", "${ctx}/resources/extjs/ux/ProgressBarPager.js", //通用 "${ctx}/resources/js/Ext.ux.override.js", "${ctx}/resources/js/share.js", "${ctx}/resources/js/shareux.js", '${ctx}/plugins/project/web/resources/js/materials/MaterialsGridPanel.js', '${ctx}/plugins/project/web/resources/js/materials/MaterialsFormWin.js' ], complete:function(){ ctx = "${ctx}"; Ext.QuickTips.init();//支持tips提示非空 var meteriaGrid = new Ext.materials.MaterialsGridPanel({ taskId:'${param.taskId}', parentInstanceId:'${parentInstanceId}', nodeId:'${param.nodeId}', isWrite:'${isWrite}', zjl:'${zjl}', fz:'${fz}', parentTaskId:'${parentTaskId}', isReadPrice:'${isReadPrice}', isWritePrice:'${isWritePrice}', projectId:'${projectId}' }); new Ext.Viewport({ layout : 'fit', items : [meteriaGrid] }); } }); </script> </head> <body> </body></html>GridPanel如下：
Ext.ns("Ext.materials");
Ext.materials.MaterialsGridPanel = Ext.extend(Ext.grid.GridPanel, { projectId:null, type:null, parentInstanceId:null, taskId:null, nodeId:null, isWrite:null, zjl:null, fz:null, parentTaskId:null, isReadPrice:null, isWritePrice:null, feeType:null, constructor : function(_config) { Ext.apply(this, _config || {}); this.pageSize = 20; this.Url = { all : ctx + '/projectMaterials/queryListForPage',// 加载所有 insertUrl : ctx + '/projectMaterials/insert', updateUrl : ctx + '/projectMaterials/update', deleteUrl : ctx + '/projectMaterials/delete', getSumTotol: ctx + '/projectMaterials/getSumTotol' //获取总计一行数据 }; /** 顶部工具栏 */ if(this.isWrite==1&&this.isWritePrice==1){ this.toolbar = new Ext.Toolbar({ items:[new Ext.Action({ text : '新增', iconCls : 'query', scope:this, handler : this.showAddWindow }),new Ext.Action({ text : '修改', iconCls : 'query', scope:this, handler : this.showEditWindow }),new Ext.Action({ text : '删除', iconCls : 'query', scope:this, handler : this.deleteData })] }); }else{ this.toolbar = new Ext.Toolbar({}); } /** 基本信息-数据源 */ this.store = new Ext.data.Store({ remoteSort : true, baseParams : { start : 0, limit : this.pageSize, projectId:this.projectId, feeType:this.feeType, processInstanceId : this.parentInstanceId, billId:recordId, taskId:this.taskId }, proxy : new Ext.data.HttpProxy({// 获取数据的方式 method : 'POST', url : this.Url.all }), reader : new Ext.data.JsonReader({// 数据读取器 totalProperty : 'results', // 记录总数 root : 'rows' // Json中的列表数据根节点 }, ['id', 'billId', 'nameSpec','unit','amount','price','remark','alias','materialType']), listeners:{ //增加统计一行 load:this.totalFunction, scope : this } }); /** 基本信息-选择模式 */ this.selModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false }); /** 基本信息-数据列 */ this.colModel = new Ext.grid.ColumnModel({ columns : [this.selModel, { header:'ID', dataIndex:'id', hidden:true },{ header:'提料单号', dataIndex:'billId', hidden:true },{ header : '名称及规格', dataIndex : 'nameSpec' },{ header : '类型', dataIndex : 'materialType', renderer:function(value){ if(value==1){ return "材料"; } if(value==2){ return "工具" } return value; } },{ header : '别名', dataIndex : 'alias' },{ header : '单位', dataIndex : 'unit' }, { header:'数量', dataIndex:'amount' },{ header:'单价', dataIndex:'price' },{ header:'总价', dataIndex:'totalPrice', renderer:function(value,meta,record){ if(record.data.id){ value = record.data.price*record.data.amount; } return value; } },{ header : '备注', dataIndex : 'remark', width:300 }] }); /**this.searchField = new Ext.ux.form.SearchField( {
store : this.store, paramName : 'processInstanceName', emptyText : '请输入工作名称', style : 'margin-left:5px;' }); this.tbar.add(this.searchField);*/
/** 底部工具条 */ this.bbar = new Ext.PagingToolbar({ pageSize : this.pageSize, store : this.store, displayInfo : true }); Ext.materials.MaterialsGridPanel.superclass.constructor.call(this, { store : this.store, colModel : this.colModel, selModel : this.selModel, bbar : this.bbar, tbar : this.toolbar, autoScroll : 'auto', region : 'center', loadMask : true, stripeRows : true }); this.store.load(); },/** 添加组件 */ showAddWindow : function() { if (!this.addWindow) { this.addWindow = new Ext.materials.MaterialsFormWin({ store : this.store, saveUrl : this.Url.insertUrl }); } this.addWindow.reset(); this.addWindow.show(); }, /** 修改组件 */ showEditWindow : function() { var records = this.getSelectionModel().getSelections(); if (records.length==0) { Ext.MessageBox.show({ title : '警告', icon : Ext.MessageBox.WARNING, buttons : Ext.MessageBox.OK, msg : '请选择要修改的记录' }); return false; }else if(records.length!=1){ Ext.MessageBox.show({ title : '警告', icon : Ext.MessageBox.WARNING, buttons : Ext.MessageBox.OK, msg : '一次只能修改一条记录' }); return false; }else if(!records[0].data.id){ Ext.MessageBox.show({ title : '警告', icon : Ext.MessageBox.WARNING, buttons : Ext.MessageBox.OK, msg : '总计一行是不可以修改的' }); return false; } if (!this.editWindow) { this.editWindow = new Ext.materials.MaterialsFormWin({ store : this.store, saveUrl : this.Url.updateUrl }); } this.editWindow.reset(); this.editWindow.show(); this.editWindow.loadRecord(records[0]); }, /** 删除信息 */ deleteData : function() { /** 选中的记录 */ var records = this.getSelectionModel().getSelections(); if (records.length==0) { Ext.MessageBox.show({ title : '警告', icon : Ext.MessageBox.WARNING, buttons : Ext.MessageBox.OK, msg : '请选择要删除的记录' }); return false; } var ids = []; for (var i = 0; i < records.length; i++) { ids[i]=records[i].data.id; if(!records[i].data.id){ Ext.MessageBox.show({ title : '警告', icon : Ext.MessageBox.WARNING, buttons : Ext.MessageBox.OK, msg : '总计一行是不可以删除的' }); return false; } } Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗？', function(btn) { if (btn == 'yes') { Ext.Ajax.request({ url : this.Url.deleteUrl, params : { ids : ids }, success : function(response, options) { var text = Ext .decode(response.responseText); Ext.Msg.alert('提示', text.msg,function(){ this.store.reload(); },this); }, failure : function() { Ext.MessageBox.alert('提示', '请求失败！'); }, scope : this }); } }, this); }, //增加统计一行 totalFunction:function(){ if(this.store.getTotalCount()!=0){ Ext.Ajax.request({ url : this.Url.getSumTotol, method : 'post', params : { billId:recordId }, success : function(response, options) { var data = Ext.decode(response.responseText).msg; if(data!=null){ var record =new Ext.data.Record({id:'',billId:'',nameSpec:'',materialType:'总计:',alias:'',unit:'',amount:'',price:'',totalPrice:data.price,remark:''}); this.store.insert(this.store.getCount(),record); } }, scope : this }); } }});winForm如下：
Ext.ns('Ext.materials');
Ext.materials.MaterialsFormWin = Ext.extend(Ext.Window, { saveUrl : null, store:null, constructor : function(config) { Ext.apply(this, config || {}); /** 基本信息-详细信息的form */ this.formPanel = new Ext.form.FormPanel({ frame : false, bodyStyle : 'padding:10px;border:0px', labelwidth : 70, defaultType : 'textfield', defaults:{ anchor : '99%' }, items : [{ xtype : 'hidden', fieldLabel : 'ID', name : 'id' }, { fieldLabel : '名称及规格', allowBlank : false, name : 'nameSpec', blankText:'名称及规格是必填的' }, { fieldLabel : '类型', name : 'materialType', hiddenName:'materialType', xtype:'combo', triggerAction:'all', allowBlank : false, mode:'local', store:new Ext.data.ArrayStore({ fields:['value','text'], data:[ ['1','材料'], ['2','工具'] ] }), displayField:'text', valueField:'value', blankText:'类型是必填的', editable:false }, { fieldLabel : '别名', name : 'alias' },{ fieldLabel:'单位', allowBlank : false, blankText:'单位是必填的', name:'unit' },{ xtype:'numberfield', name:'amount', fieldLabel:'数量', allowNegative:false, allowBlank : false, decimalPrecision:0, blankText:'数量是必填的', nanText:'请输入有效数字' },{ xtype:'numberfield', name:'price', fieldLabel:'单价', allowNegative:false, decimalPrecision:2, allowBlank : false, blankText:'单价是必填的', nanText:'请输入有效数字' },{ xtype : 'textarea', fieldLabel : '备注', maxLength : 128, height : 100, name : 'remark', anchor : '99%' }] }); Ext.materials.MaterialsFormWin.superclass.constructor.call(this, { layout : 'fit', width : 500, height : 350, title : '无项目材料采购', closeAction : 'hide', plain : true, modal : true, resizable : true, items : [this.formPanel], buttons : [{ text : '保存', iconCls:'disk', handler : this.saveFun, scope : this }, { text : '关闭', iconCls:'cancel', handler : function() { var form = this.formPanel.getForm(); var id = form.findField("id") .getValue(); form.reset(); if (id != '') form.findField("id") .setValue(id); } }] }); }, saveFun : function() { var form = this.formPanel.getForm(); if (!form.isValid()) { return; } // 发送请求 this.formPanel.getForm().submit({ url : this.saveUrl, method:'post', params:{ billId:recordId }, success : function(form,action) { Ext.MessageBox.alert('提示',action.result.msg,function(){ this.store.reload(); this.hide(); },this); }, failure : function(form, action) { Ext.MessageBox.alert('提示', '请求失败！'); newTab.close(); waitMask.hide(); }, scope:this }); }, reset:function(){ this.formPanel.getForm().reset(); }, loadRecord:function(record){ this.formPanel.getForm().loadRecord(record); } });