<%@ 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, width: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, width: 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(), width: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...', width: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: "关键字维护", width: 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: "编码", width: 50, sortable: true, dataIndex: 'keywordCode'},
{header: "段落", width: 50, sortable: true, dataIndex: 'paragraph'},
{header: "类型", width: 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: "关键字", width: 200, sortable: true, dataIndex: 'keywords'}
],
width: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>
