自己做的一個Ext例子,基于Struts1的,Struts2和Strut1的差別還是很大的,這裡隻展示下Struts1的。
Ext.onReady(function(){
Ext.QuickTips.init(); //顯示提示資訊
var store = new Ext.data.JsonStore({
autoDestroy: true,
autoLoad:true,
url: 'work.do?method=dataQuery',
totalProperty: 'results',
root:'rows',
fields:["workId","areaCode","workStartTime","workEndTime","deptCode","empNo","createTime","effectiveTime"]
});
var sm = new Ext.grid.CheckboxSelectionModel();
var colM=new Ext.grid.ColumnModel([
sm,
{header: "序号", width: 50, sortable: true, dataIndex: 'workId'},
{header: "區部代碼", width: 100, sortable: true, dataIndex: 'areaCode'},
{header: "上班時間", width: 100, sortable: true, dataIndex: 'workStartTime'},
{header: "下班時間", width: 100, sortable: true, dataIndex: 'workEndTime'},
{header: "配置網點", width: 100, sortable: true, dataIndex: 'deptCode'},
{header: "配置人", width: 100, sortable: true, dataIndex: 'empNo'},
{header: "配置時間", width: 150, sortable: true, dataIndex: 'createTime',renderer:CreateRender},
{header: "生效日期", width: 150, sortable: true, dataIndex: 'effectiveTime',renderer:EffectiveRender }
]);
function CreateRender(value){
if(value instanceof Date){
return new Date(value).format("Y-m-d");
}else{
return Ext.util.Format.substr(value,0,19);
}
}
function EffectiveRender(value){
if(value instanceof Date){
return new Date(value).format("Y-m-d");
}else{
return Ext.util.Format.substr(value,0,10);
}
}
var tbars = [{
text:'添加',
tooltip:'添加記錄',
handler:function(){
postForm.getForm().reset();
postWindow.show();
}
},
{xtype:'tbseparator'},
{
text:'删除',
tooltip:'删除選中的記錄',
handler:function(){
var _record = sm.getSelected();
if(_record){
Ext.Msg.confirm("是否要删除?","是否要删除這些被選擇的資料?",
function(btn){
if(btn == "yes"){
var ss = sm.getSelections();
var delUrl = "work.do?method=delete&";
var ids="";
for(var i=0; i<ss.length; i++){
ids=ids+ss[i].data.workId+",";
}
delUrl = delUrl + "ids="+ids;
Ext.Ajax.request({
url:delUrl,
success:function(){
Ext.Msg.alert("删除資訊成功","您已經成功删除資訊!");
store.reload();
},
failure:function(){
Ext.Msg.alert('錯誤','伺服器出現錯誤請稍後再試!');
}
});
}
}
);
}else{
Ext.Msg.alert('删除操作','您必須選擇一行資料以便删除!');
}
}
},
{xtype:'tbseparator'},
{
text:'修改',
handler:function(){
postForm.getForm().reset();
var rows = Ext.getCmp("gridView").getSelectionModel().getSelections();
if(rows.length!=1){
Ext.Msg.alert("","請你選擇一行資料進行操作!");
return;
}
postWindow.show();
postForm.getForm().findField('workId').setValue(rows[0].get('workId'));
postForm.getForm().findField('areaCode').setValue(rows[0].get('areaCode'));
postForm.getForm().findField('workStartTime').setValue(rows[0].get('workStartTime'));
postForm.getForm().findField('workEndTime').setValue(rows[0].get('workEndTime'));
postForm.getForm().findField('deptCode').setValue(rows[0].get('deptCode'));
postForm.getForm().findField('empNo').setValue(rows[0].get('empNo'));
var effective=Ext.util.Format.substr(rows[0].get('effectiveTime'),0,10);
postForm.getForm().findField('effectiveTime').setValue(effective);
}
}
];
var bar=new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
emptyMsg: "沒有記錄"
});
var grid = new Ext.grid.GridPanel({
id:'gridView',
store: store,
cm:colM,
title:'上班時間資訊清單',
renderTo:"hello",
tbar:tbars,
bbar:bar,
sm: sm,
layout: 'fit',
height:650
});
//建立表單的視窗
var postForm = new Ext.form.FormPanel({
frame : true ,
defaultType : 'textfield' ,
buttonAlign : 'center' ,
labelAlign : 'right' ,
labelWidth : 70 ,
width :300,
items: [
{
xtype:"hidden",
name:"workId"
},
{
fieldLabel:"區部代碼",
name:"areaCode"
},
{
fieldLabel:"上班時間",
name:"workStartTime"
},
{
fieldLabel:"下班時間",
name:"workEndTime"
},
{
fieldLabel:"配置網點",
name:"deptCode"
},
{
fieldLabel:"配置人",
name:"empNo"
},
{
xtype: "datefield",
format:'Y-m-d',
fieldLabel:"生效日期",
width: 120,
height:10,
name:"effectiveTime"
}
],
buttons: [{
xtype:'button',
text: '儲存',
handler:function(){
Ext.MessageBox.show({
msg: '正在儲存,請稍等...',
progressText: 'Saving...',
wait:true,
waitConfig: {interval:200},
icon:'download'
});
postForm.form.doAction('submit',{
url:"work.do?method=add",
method:'post',
success:function(form,action){
Ext.MessageBox.hide();
Ext.Msg.alert('恭喜','儲存目标成功');
store.reload();
postWindow.hide();
},
failure:function(){
Ext.Msg.alert('錯誤','伺服器出現錯誤請稍後再試!');
}
});
}
},
{
text: '取消',
handler:function(){
postWindow.hide();
}
}]
});
//将表單放到一個視窗中,并顯示
var postWindow = new Ext.Window({
title: "人員資訊表單",
width: 300,
height:260,
collapsible:true,
maximizable:true,
layout: 'form',
plain:true,
modal:true,
closeAction: 'hide',
items: postForm
});
});
//背景java代碼
//查詢清單
public ActionForward dataQuery(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
throws Exception {
try{
List<WorkTimeConfig> workList=workTimeConfigService.listAll();
String json = "{results:"+workList.size()+",rows:[";
for(WorkTimeConfig config:workList){
json += "{workId:" + config.getWorkId()+ ",areaCode:'"+config.getAreaCode()+ "',workStartTime:'" + config.getWorkStartTime()+ "'," + "workEndTime:'"+config.getWorkEndTime()+"',deptCode:'"+config.getDeptCode()+"',empNo:'"+config.getEmpNo()+"',createTime:'"+config.getCreateTime()+"',effectiveTime:'"+config.getEffectiveTime()+"'},";
}
json=json.substring(0,json.length()-1);
json += "]}";
PrintWriter pw = response.getWriter();
pw.write(json);
}catch(Exception ce){
ce.printStackTrace();
}
return null;
}
//新增方法(不想使用ActionForm,字段比較少,是以就用最傳統的方式)
public ActionForward add(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String workId=request.getParameter("workId");
if(null!=workId&&!"".equals(workId)){
WorkTimeConfig workConfig=new WorkTimeConfig();
workConfig.setWorkId(Long.parseLong(workId));
workConfig.setAreaCode(request.getParameter("areaCode"));
workConfig.setWorkStartTime(request.getParameter("workStartTime"));
workConfig.setWorkEndTime(request.getParameter("workEndTime"));
java.text.SimpleDateFormat df=new java.text.SimpleDateFormat("yyyy-MM-dd");
workConfig.setEffectiveTime(df.parse(request.getParameter("effectiveTime")));
workTimeConfigService.UpdateWorkTime(workConfig);
}else{
WorkTimeConfig workConfig=new WorkTimeConfig();
workConfig.setAreaCode(request.getParameter("areaCode"));
workConfig.setWorkStartTime(request.getParameter("workStartTime"));
workConfig.setWorkEndTime(request.getParameter("workEndTime"));
workConfig.setDeptCode("001");
workConfig.setEmpNo("admin");
java.text.SimpleDateFormat df=new java.text.SimpleDateFormat("yyyy-MM-dd");
workConfig.setEffectiveTime(df.parse(request.getParameter("effectiveTime")));
workTimeConfigService.addWorkTime(workConfig);
}
PrintWriter pw = response.getWriter();
pw.write("{success:true}");
return null;
}
//删除方法
public ActionForward delete(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String id=request.getParameter("ids");
String [] ids=id.split(",");
for(int i=0;i<ids.length;i++){
workTimeConfigService.deleteWorkTime(Long.parseLong(ids[i]));
}
PrintWriter pw = response.getWriter();
pw.write("{success:true}");
return null;
}