Ext增删改查
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户列表</title></head><script type="text/javascript">Ext.onReady(function(){//定义数据集对象var typeStore = new Ext.data.Store({//配置分组数据集//autoLoad :true,reader: new Ext.data.XmlReader({totalRecords: "results",record: "Users",id: "id"}, Ext.data.Record.create([{name: 'id'},{name: 'username'}, {name: 'password'}])),proxy : new Ext.data.HttpProxy({url : 'usersext.do?method=getUsersList'})})//创建工具栏组件var toolbar = new Ext.Toolbar([{text : '新增用户',iconCls:'add',handler : showAddUsersType},'-',{text : '修改用户',iconCls:'option',handler : showModifyUsersType},'-',{text : '删除用户',iconCls:'remove',handler : showDeleteUsersType}]);//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var usersGrid = new Ext.grid.GridPanel({applyTo : 'grid-div',tbar : toolbar,frame:true,store: typeStore,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行号',width : 40}),//表格行号组件cb,{header: "编号", width: 80, dataIndex: 'id', sortable: true,hidden:true},{header: "姓名", width: 180, dataIndex: 'username', sortable: true},{header: "密码", width: 280, dataIndex: 'password', sortable: true}], bbar: new Ext.PagingToolbar({ pageSize: 15, store: typeStore, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }) });typeStore.load({params:{start:0, limit:15}});//创建新增或修改用户类型信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式var usersForm = new Ext.FormPanel({labelSeparator : "：",frame:true,border:false,items : [{xtype:'textfield',width : 200,allowBlank : false,blankText : '类型名称不能为空',name : 'username',fieldLabel:'姓名'},{xtype:'textfield',width : 200,name : 'password',fieldLabel:'密码'},{xtype:'hidden',name : 'id'}],buttons:[{text : '关闭',handler : function(){win.hide();}},{text : '提交',handler : submitForm}]});//创建弹出窗口var win = new Ext.Window({layout:'fit', width:380, closeAction:'hide', height:200,resizable : false,shadow : true,modal :true, closable:true, bodyStyle:'padding:5 5 5 5', animCollapse:true,items:});//显示新建用户类型窗口function showAddUsersType(){usersForm.form.reset();usersForm.isAdd = true;win.setTitle("新增用户信息");win.show();}//显示修改用户类型窗口function showModifyUsersType(){var usersList = getUsersIdList();var num = usersList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能修改一条用户信息。")}else if(num == 1){usersForm.isAdd = false;win.setTitle("修改用户信息");win.show();var usersId = usersList;loadForm(usersId);}}//显示删除用户对话框function showDeleteUsersType(){var usersList = getUsersIdList();var num = usersList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能删除一条用户信息。")}else if(num == 1){Ext.MessageBox.confirm("提示","您确定要删除所选用户吗？",function(btnId){if(btnId == 'yes'){var usersId = usersList;deleteUsers(usersId);}})}}//删除用户类型function deleteUsers(usersId){var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在删除用户信息请稍后......'});Ext.Ajax.request({url : 'usersext.do?method=deleteUsers',params : {usersId : usersId},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);if(result.success){//服务器端数据成功删除后，同步删除客户端列表中的数据var index = typeStore.find('id',usersId);if(index != -1){var rec = typeStore.getAt(index)typeStore.remove(rec);}Ext.Msg.alert('提示','删除用户信息成功。');}else{Ext.Msg.alert('提示','该用户已包含'+result.num+'本用户信息不能删除！');}},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','删除用户类型请求失败！');}});}//加载表单数据function loadForm(usersId){usersForm.form.load({waitMsg : '正在加载数据请稍后',//提示信息waitTitle : '提示',//标题url : 'usersext.do?method=getUsersById',//请求的url地址params : {usersId:usersId},method:'GET',//请求方式success:function(form,action){//加载成功的处理函数//Ext.Msg.alert('提示','数据加载成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','数据加载失败');}});}//提交表单数据function submitForm(){//判断当前执行的提交操作，isAdd为true表示执行用户类型新增操作，false表示执行用户类型修改操作if(usersForm.isAdd){//新增用户信息usersForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : '正在提交数据请稍后',//提示信息waitTitle : '提示',//标题url : 'usersext.do?method=addUsers',//请求的url地址method:'POST',//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateUsersList(action.result.usersId);Ext.Msg.alert('提示','新增用户成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','新增用户失败');}});}else{//修改用户信息usersForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : '正在提交数据请稍后',//提示信息waitTitle : '提示',//标题url : 'usersext.do?method=modifyUsers',//请求的url地址method:'POST',//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateUsersList(action.result.UsersId);Ext.Msg.alert('提示','修改用户成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','修改用户失败');}});}}//明细数据修改后，同步更新用户列表信息function updateUsersList(usersId){var fields = getFormFieldsObj(usersId);var index = typeStore.find('id',fields.id);if(index != -1){var item = typeStore.getAt(index);for(var fieldName in fields){item.set(fieldName,fields);}typeStore.commitChanges();}else{var rec = new Ext.data.Record(fields);typeStore.add(rec);}}//取得表单数据function getFormFieldsObj(usersId){var fields = usersForm.items;var obj = {};for(var i = 0 ; i < fields.length ; i++){var item = fields.itemAt(i);var value = item.getValue();obj = value;}if(Ext.isEmpty(obj['id'])){obj['id'] = usersId;}return obj;}//取得所选用户function getUsersIdList(){var recs = usersGrid.getSelectionModel().getSelections();var list = [];if(recs.length == 0){Ext.MessageBox.alert('提示','请选择要进行操作的用户！');}else{for(var i = 0 ; i < recs.length ; i++){var rec = recs;list.push(rec.get('id'))}}return list;} });</script><body><div id='grid-div' style="width:100%; height:100%;"/></body></html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="<%=basePath%>/pagesExt/js/excel.js"></script><title>收入列表</title></head><script type="text/javascript">Ext.onReady(function(){//定义数据集对象var bookStore = new Ext.data.Store({//autoLoad :true,reader: new Ext.data.XmlReader({totalRecords: "results",record: "Book",id: "id"},Ext.data.Record.create([{name: 'id'},{name: 'bookName'},{name: 'author'},{name: 'typeName'},{name: 'price'},{name: 'brief'}])),proxy : new Ext.data.HttpProxy({url : 'bookext.do?method=getBookList'})})//创建工具栏组件var toolbar = new Ext.Toolbar([{text : '新增收入',iconCls:'add',handler:showAddBook}, '-',{text : '修改收入',iconCls:'option',handler:showModifyBook}, '-',{text : '删除收入',iconCls:'remove',handler:showDeleteBooks},'-',{text : '总收入',iconCls:'tot',handler : showTotalPay},'-', new Ext.Toolbar.TextItem('按时间查询：'), {xtype:'datefield',width : 150,allowBlank : false,blankText : '不能为空',id : 'times',name : 'times',emptyText:'请选择时间', format:'Y-m-d' },{iconCls:'find',handler:onItemCheck },'-',{text : '导出数据',iconCls:'down',handler:downExcel}]);//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var bookGrid = new Ext.grid.GridPanel({applyTo : 'grid-div',frame:true,tbar : toolbar,store: bookStore,stripeRows : true,autoScroll : true, viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行号',width : 40}),//表格行号组件cb,{header: "收入编号", width: 1, dataIndex: 'id', sortable: true,hidden:true},{header: "收入名称", width: 80, dataIndex: 'bookName', sortable: true},{header: "作者", width: 80, dataIndex: 'author', sortable: true},{header: "类型", width: 80, dataIndex: 'typeName', sortable: true},{header: "金额", width: 80, dataIndex: 'price', sortable: true},{header: "简介", width: 80, dataIndex: 'brief', sortable: true}], bbar: new Ext.PagingToolbar({ pageSize: 15, store: bookStore, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" })});bookStore.load({params:{start:0, limit:15}});//按时间查询方法 function onItemCheck(){ var dd=Ext.get('times').getValue(); if(dd=='请选择时间'){ dd = ""; } bookStore.reload({params:{start:0,limit:15,dd:dd}}); };//创建新增或修改收入信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式var bookForm = new Ext.FormPanel({labelSeparator : "：",frame:true,border:false,items : [{xtype:'textfield',width : 200,allowBlank : false,blankText : '收入名称不能为空',name : 'bookName',fieldLabel:'收入名称'},{xtype:'textfield',width : 200,allowBlank : false,blankText : '收入作者不能为空',name : 'author',fieldLabel:'作者'},{xtype:'combo',width : 200,allowBlank : false,blankText : '必须选择收入类型',hiddenName : 'bookTypeId',name : 'typeName',store : new Ext.data.Store({autoLoad :true,reader: new Ext.data.XmlReader({totalRecords: "results",record: "BookType",id: "id"},Ext.data.Record.create([{name: 'id'},{name: 'title'},{name: 'detail'}])),proxy : new Ext.data.HttpProxy({url : 'bookext.do?method=getBookTypeList'})}),//设置数据源allQuery:'allbook',//查询全部信息的查询字符串triggerAction: 'all',//单击触发按钮显示全部数据editable : false,//禁止编辑loadingText : '正在加载收入类型信息',//加载数据时显示的提示信息displayField:'title',//定义要显示的字段valueField : 'id',emptyText :'请选择收入类型',mode: 'remote',//远程模式fieldLabel:'类型'},{xtype:'textfield',width : 200,name : 'price',fieldLabel:'金额'},{xtype:'textarea',width : 200,name : 'brief',fieldLabel:'简介'},{xtype:'hidden',name : 'id'}],buttons:[{text : '关闭',handler : function(){win.hide();}},{text : '提交',handler : submitForm}]});//创建弹出窗口var win = new Ext.Window({layout:'fit', width:380, closeAction:'hide', height:280,resizable : false,shadow : true,modal :true, closable:true, bodyStyle:'padding:5 5 5 5', animCollapse:true,items:});//显示新建收入窗口function showAddBook(){bookForm.form.reset();bookForm.isAdd = true;win.setTitle("新增收入信息");win.show();}//显示修改收入窗口function showModifyBook(){var bookList = getBookIdList();var num = bookList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能修改一条收入信息。")}else if(num == 1){bookForm.form.reset();bookForm.isAdd = false;win.setTitle("修改收入信息");win.show();var bookId = bookList;loadForm(bookId);}}//显示删除收入对话框function showDeleteBooks(){var bookList = getBookIdList();var num = bookList.length;if(num == 0){return;}Ext.MessageBox.confirm("提示","您确定要删除所选收入吗？",function(btnId){if(btnId == 'yes'){deleteBooks(bookList);}})}//删除收入function deleteBooks(bookList){var bookIds = bookList.join('-');var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在删除收入信息请稍后......'});Ext.Ajax.request({url : 'bookext.do?method=deleteBooks',params : {bookIds : bookIds},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);if(result.success){//服务器端数据成功删除后，同步删除客户端列表中的数据for(var i = 0 ; i < bookList.length ; i++){var index = bookStore.find('id',bookList);if(index != -1){var rec = bookStore.getAt(index)bookStore.remove(rec);}}Ext.Msg.alert('提示','删除收入信息成功。');}else{Ext.Msg.alert('提示','删除收入信息失败！');}},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','删除收入信息请求失败！');}});}//加载表单数据function loadForm(bookId){bookForm.form.load({ waitMsg : '正在加载数据请稍后',//提示信息waitTitle : '提示',//标题url : 'bookext.do?method=getBookById',//请求的url地址params : {bookId:bookId},method:'GET',//请求方式success:function(form,action){//加载成功的处理函数//Ext.Msg.alert('提示','数据加载成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','数据加载失败');}});}//提交表单数据function submitForm(){//判断当前执行的提交操作，isAdd为true表示执行收入新增操作，false表示执行收入修改操作if(bookForm.isAdd){//新增收入信息bookForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : '正在提交数据请稍后',//提示信息waitTitle : '提示',//标题url : 'bookext.do?method=addBook',//请求的url地址method:'POST',//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateBookList(action.result.bookId);Ext.Msg.alert('提示','新增收入成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','新增收入失败');}});}else{//修改收入信息bookForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : '正在提交数据请稍后',//提示信息waitTitle : '提示',//标题url : 'bookext.do?method=modifyBook',//请求的url地址method:'POST',//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateBookList(action.result.bookId);Ext.Msg.alert('提示','修改收入成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','修改收入失败');}});}}//明细数据修改后，同步更新收入列表信息function updateBookList(bookId){var fields = getFormFieldsObj(bookId);var index = bookStore.find('id',fields.id);if(index != -1){var item = bookStore.getAt(index);for(var fieldName in fields){item.set(fieldName,fields);}bookStore.commitChanges();}else{var rec = new Ext.data.Record(fields);bookStore.add(rec);}}//取得表单数据function getFormFieldsObj(bookId){var fields = bookForm.items;var obj = {};for(var i = 0 ; i < fields.length ; i++){var item = fields.itemAt(i);var value = item.getValue();if(item.getXType() == 'combo'){var index = item.store.find('id',value);if(index != -1){var selItem = item.store.getAt(index);}value = selItem.get('title');}obj = value;}if(Ext.isEmpty(obj['id'])){obj['id'] = bookId;}return obj;}//取得所选收入function getBookIdList(){var recs = bookGrid.getSelectionModel().getSelections();var list = [];if(recs.length == 0){Ext.MessageBox.alert('提示','请选择要进行操作的收入！');}else{for(var i = 0 ; i < recs.length ; i++){var rec = recs;list.push(rec.get('id'))}}return list;};//查看总支出function showTotalPay(){winP.setTitle("您的总支出信息");winP.show();};//导出excelfunction downExcel(){ Ext.Ajax.request({url : 'analysis.do?method=crateInExcel',params : {type : 'b'},method : 'POST',success : function(response,options){ Ext.Msg.alert('成功提示','导出数据成功!保存在您的C盘下的文件名为: 收入数据.xls。'); },failure : function(response,options){Ext.Msg.alert('失败提示','导出数据失败！');}}); };//弹出总收入信息var sumIncome = document.getElementById("sumIncome").value; var sumIncomeY = document.getElementById("sumIncomeY").value; var winIn = new Ext.Window({layout:'fit', width:370, closeAction:'hide', height:280,resizable : false,shadow : true,modal :true, closable:true, bodyStyle:'padding:5 5 5 5', animCollapse:true,items:{title:"总收入",collapsible:true,html : '<br><center><font size = 6>本月总收入为：</font><font size = 5 color= red>'+sumIncome+'元</font></center><br/><center><font size = 6>本年总收入为：</font><font size = 5 color= red>'+sumIncomeY+'元</font></center><br/>'}});//查看总收入function showTotalPay(){winIn.setTitle("您的总收入信息");winIn.show();}});</script><body><div id='grid-div' style="width:100%; height:100%;"/><input type="hidden" name="sumIncome" id="sumIncome" value="${sumIncome }"/><input type="hidden" name="sumIncomeY" id="sumIncomeY" value="${sumIncomeY }"/></body></html>
页:
[1]