<%@ page language="java" import="java.util.*,com.sxdf.ms.util.*" pageEncoding="UTF-8" %> <%@taglib uri="/struts-tags" prefix="s" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; //设置页面不缓存 response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>所有关键字</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="js/dd.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/css.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); //显示提示信息 var clientHeight = document.body.clientHeight; var clientWidth = document.body.clientWidth; /**/ var store = new Ext.data.JsonStore({ url:"<%=basePath%>keyword/keywordAction!getList",
totalProperty: "sum", root: "datas", idProperty: "keywordCode", fields: ['keywordCode', 'keywords', 'paragraph', 'actType']
}); store.load( { params : { start : 0,//开始数 limit : <%= PropertiesUtil.getProperty("keywordPageLength")%> //每次载入数量，服务器段就根据这两个参数来处理数据分页 } }); var actTypeStore = new Ext.data.SimpleStore({data: keyword_actType, fields: ['id', 'name']}); var row_keywordCode = { layout:'column', //从左往右布局 items:[{ columnWidth:.9, //该列有整行中所占百分比 layout:'form', //从上往下布局 items:[{ xtype:'textfield', fieldLabel:'编码', name:'keywordDto.keyword.keywordCode', disabled:true }] }] }; var row_paragraph = { layout:'column', //从左往右布局 items:[{ columnWidth:.9, //该列有整行中所占百分比 layout:'form', //从上往下布局 items:[{ xtype:'textfield', fieldLabel:'段落', name:'keywordDto.keyword.paragraph', allowBlank:false, blankText:'该项不能为空!', regexText:'不合法' }] }] }; var row_actType = { layout:'column', //从左往右布局 items:[{ columnWidth:.9, //该列有整行中所占百分比 layout:'form', //从上往下布局 items:[{ xtype:'combo', fieldLabel:'类型', store:actTypeStore, 129, name: 'keywordDto.keyword.actType', hiddenName: 'keywordDto.keyword.actType', triggerAction: 'all',// 显示所有下列数据，一定要设置属性triggerAction为all editable:false, displayField:'name', value: '50001', valueField:'id', forceSelection : true,// 必须选择一个选项 mode:'local', //数据来本地local 来自远程服务器用remote emptyText:'请选择类型' }] }] }; var row_keywords = { layout:'column', items:[{ columnWidth:.9, layout:'form', items:[{ xtype:'textarea', fieldLabel:'关键字', name:'keywordDto.keyword.keywords', height: 100, 129, allowBlank:false, blankText:'该项不能为空!' }] }] }; //创建表单的窗口，添加用户 var createFormWindow = function(type, _record){ var items = [row_paragraph, row_actType, row_keywords]; var url = "keyword/keywordAction!add.action"; var params = ""; if(type == "update") { items = [row_keywordCode, row_paragraph, row_actType, row_keywords]; url = "keyword/keywordAction!update.action"; params = {"keywordDto.keyword.keywordCode":_record.get("keywordCode")}; } var postForm = new Ext.form.FormPanel({ renderTo:Ext.getBody(), 300, name:"keywordInfo", autoHeight:true, frame:true, layout:'form', labelWidth:65, labelAlign:'right', style:'padding:5px', items:items, buttonAlign:'center', buttons: [{ xtype:'button', text: '保存', handler:function(){ //通过客户端验证 //alert(postForm.getForm().findField("userDto.user.username").getValue()); if(postForm.form.isValid()){ Ext.MessageBox.show({ msg: '正在保存，请稍等...', progressText: 'Saving...', 300, wait:true, waitConfig: {interval:200}, icon:'download' }); postForm.form.doAction('submit',{//2通过form向后台发出请求 url:url, method:'post', params:params, success:function(form,action){ Ext.MessageBox.hide(); Ext.Msg.alert('恭喜','保存目标成功'); store.reload(); postWindow.destroy(); }, failure:function(form,action){ Ext.Msg.alert('失败', action.result.msg); } }); } } }, { text: '取消', handler:function(){ postWindow.destroy(); } }] }); //将表单放到一个窗口中，并显示 var postWindow = new Ext.Window({ title: "关键字维护", 300, height:300, collapsible:true, maximizable:true, layout: 'fit', plain:true, bodyStyle:'padding:5px;', modal:true, items: postForm }); postWindow.show();
//这里复用的手法比较粗糙，请求大神们能给个更优雅的写法 if(type == "update") { postForm.getForm().findField("keywordDto.keyword.keywordCode").setValue(_record.get("keywordCode")); postForm.getForm().findField("keywordDto.keyword.paragraph").setValue(_record.get("paragraph")); postForm.getForm().findField("keywordDto.keyword.actType").setValue(_record.get("actType")); postForm.getForm().findField("keywordDto.keyword.keywords").setValue(_record.get("keywords")); //Ext.getCmp("keywordInfo").getForm().loadRecord(_record); } return postForm; }; var rowdblclick = function(){ var _record = sm.getSelected(); if(_record){ createFormWindow("update", _record); } else{ Ext.Msg.alert('修改操作','您必须选择一行数据以便修改！'); } }; var tbars = [ //在GridPanel列表界面头部的按钮，包括：添加、删除按钮 //添加按钮 { text:'添 加', tooltip:'添加关键字', iconCls:'table_add', handler:createFormWindow }, {xtype:'tbseparator'}, //修改按钮 { text:'修 改', tooltip:'修改关键字', iconCls:'table_update', handler:rowdblclick }, {xtype:'tbseparator'}, //删除按钮 { text:'删 除', tooltip:'删除选中的关键字', iconCls:'table_del', handler:function(){ var _record = sm.getSelected(); if(_record){ //提示是否删除数据 Ext.Msg.confirm("是否要删除？","是否要删除这些被选择的数据？", function(btn){ if(btn == "yes"){ var ss = sm.getSelections(); var delUrl = "keyword/keywordAction!delete.action?"; for(var i=0; i<ss.length; i++){ delUrl += "keywordDto.keywordCodes=" + ss[i].data.keywordCode + "&"; //ds.remove(ss[i]); } delUrl = delUrl.substr(0, delUrl.length -1); //3发出AJAX请求删除相应的数据！ //delUrl=person!del.action?ids=1&ids=2&ids=3; Ext.Ajax.request({ url:delUrl,
//当action.result.success == true是自动回调success方法 success:function(){ //alert(action.result.success + '-' + action.result.msg); Ext.Msg.alert("删除信息成功","您已经成功删除信息！"); store.reload(); }, failure:function(){ Ext.Msg.alert('错误','服务器出现错误请稍后再试！'); } }); } } ); }else{ Ext.Msg.alert('删除操作','您必须选择一行数据以便删除！'); } } }, {xtype:'tbseparator'}, {text:'段落：'}, { xtype:"textfield", inputType:'text', invalidText:'error', id:'paragraph', name:'keywordDto.keyword.paragraph' }, {xtype:'tbseparator'}, {text:'关键字：'}, { xtype:"textfield", inputType:'text', invalidText:'error', id:'keywords', name:'keywordDto.keyword.keywords' }, { text:'查询', iconCls:'user_query', listeners:{click:function() { store.load({ params : { start : 0, limit : <%= PropertiesUtil.getProperty("keywordPageLength")%>, 'keywordDto.keyword.paragraph':Ext.getCmp('paragraph').getValue(), 'keywordDto.keyword.keywords':Ext.getCmp('keywords').getValue() } }); }} } ]; //CheckBox选择框 var sm = new Ext.grid.CheckboxSelectionModel(); // create the Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), sm, {id:'keywordCode', header: "编码", 50, sortable: true, dataIndex: 'keywordCode'}, {header: "段落", 50, sortable: true, dataIndex: 'paragraph'}, {header: "类型", 100, sortable: true, dataIndex: 'actType', renderer:function(value) { for(var i = 0; i < keyword_actType.length; i++) { //alert(value + "-" + keyword_actType[i][0]); if(value == keyword_actType[i][0]) { return keyword_actType[i][1]; } } return "未知"; } }, {header: "关键字", 200, sortable: true, dataIndex: 'keywords'} ], clientWidth, height:clientHeight, loadMark:true, stripeRows:true, title:'关键字列表', sm : sm, bbar:new Ext.PagingToolbar({ pageSize: <%=PropertiesUtil.getProperty("keywordPageLength")%>, store: store, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }), viewConfig: { forceFit: true, columnsText:"显示/隐藏列", sortAscText:"正序排列", sortDescText:"倒序排列" }, tbar: tbars }); //这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了 store.on('beforeload',function(){ Ext.apply( this.baseParams, { 'keywordDto.keyword.paragraph':Ext.getCmp('paragraph').getValue(), 'keywordDto.keyword.keywords':Ext.getCmp('keywords').getValue() } ); }); grid.on("rowdblclick", rowdblclick); grid.render('grid_example'); }); </script> </head> <body> <div id="grid_example"></div> </body> </html>