本來是想早點回家把這個PANEL跟大家共享，結果由于某種原因導緻.....
下面言歸正傳，上代碼：
Ext.Afi.CrudPanel:
注：此Panel原創并非本人，其實很多地方要感謝EasyJF還有很多開源的朋友們，有了他們技術才會越來越牛（并非廣告）
Ext.namespace('Ext.Afi');
Ext.Afi.CrudPanel = Ext.extend(Ext.Panel,{
closable:true,
autoScroll:true,
l ayout:'fit',
gridViewConfig:{},
//連結
linkRenderer:function(value) {
if(!value) {
return '';
}else {
return String.format("<a href='{0}' target='_blank'>{0}</a>");
}
},
//時間
dateRenderer:function(format) {
format = format || 'Y-m=d h:i';
return Ext.util.Format.dateRenderer(format);
},
initComponent:function() {
this.store = new Ext.data.JsonStore({
url:this.baseUrl + '?cmd=list',//子類中定義
fields:this.storeMapping,//子類中定義
root:'root',
totalProperty:'totalCount',
remoteSort:true
});
this.bottombar = new Ext.PagingToolbar({
pageSize:10,
store:this.store,
displayInfo:true
});
Ext.Afi.CrudPanel.superclass.initComponent.call(this);
var viewConfig = Ext.apply({forceFit:true},this.gridViewConfig);
this.gridPanel = new Ext.grid.GridPanel({
store:this.store,
cm:this.cm,//需在子類定義
sm:this.sm,
loadMask:true,
viewConfig:viewConfig,
tbar:this.createToolbar(),
bbar:this.bottombar
});
this.gridPanel.on('rowdblclick',this.edit,this);
this.add(this.gridPanel);
this.store.load({params:{start:0,limit:this.bottombar.pageSize}});
},
//添加視窗
create:function() {
this.showWin('add');
this.reset();
},
edit:function() {
if(this.selectOne()) {
var selectRecord = this.gridPanel.getSelectionModel().getSelected();
this.showWin('update');
this.formPanel.getForm().loadRecord(selectRecord);
}
},
del:function() {
if(this.selectMany()) {
Ext.Msg.confirm('提示','确定要删除嗎?',function(btn) {
if(btn == 'yes') {
var selections = this.gridPanel.getSelectionModel().getSelections();
var ids = new Array();
for(var i=0,len=selections.length; i<len; i++) {
try{
ids[i] = selections[i].get(this.id + '.id');
alert(ids[i]);
} catch(e) {}
}
this.body.mask('操作進行中,請稍候...','x-mask-loading');
Ext.Ajax.request({
url:this.baseUrl + '?cmd=remove&ids=' + ids,
success:function() {
this.body.unmask();
Ext.Msg.alert('恭喜','操作成功');
this.refresh();
},
failure:function() {
this.body.unmask();
Ext.Msg.alert('提示','操作失敗');
},
scope:this
});
}
}.createDelegate(this));
}
},
refresh:function() {
this.store.removeAll();
this.store.reload();
},
//顯示視窗
showWin:function(value) {
if(!this.win) {
if(!this.formPanel) {
this.formPanel = this.createForm();
}
this.win = this.createWin();
if(value='add') {
this.win.setTitle('添加','add')
} else if(value='update') {
this.win.setTitle('修改','edit')
}
}
this.win.show();
},
initWin:function(width,height) {
var win = new Ext.Window({
width:width,
height:height,
modal:true,
shadow:true,
resizable:false,
collapsible:true,
closeAction:'hide',
closable:true,
plain:true,
buttonAlign:'center',
bodyStyle:'padding:10px 0 0 15px',
items:[this.formPanel],
buttons:[{
text:'确定',
iconCls:'add',
handler:this.submitForm.createDelegate(this)
},{
text:'重置',
iconCls:'edit',
handler:this.reset,
scope:this
},{
text:'取消',
iconCls:'del',
handler:this.closeWin,
scope:this
}]
});
return win
},
submitForm:function() {
var id = this.formPanel.getForm().findField(this.id + '.id').getValue();
var url = null;
if(id == '') {
url = this.baseUrl + '?cmd=save'
} else {
url = this.baseUrl + '?cmd=update'
}
if(this.formPanel.getForm().isValid()) {
this.formPanel.getForm().submit({
waitTitle:'提示',
waitMsg:'資料送出中,請稍候......',
url:url,
method:'POST',
success:function() {
this.closeWin();
},
failure:function() {
Ext.Msg.alert('錯誤提示','資訊操作失敗');
},
scope:this
});
}
},
reset:function() {
if(this.win) {
this.formPanel.getForm().reset();
}
},
closeWin:function() {
if(this.win) {
this.win.hide();
}
this.win = null;
this.formPanel = null;
this.refresh();
},
selectOne:function() {
var selections = this.gridPanel.getSelectionModel().getSelections();
if(selections.length == 0) {
Ext.Msg.alert('提示','請選擇一條資料');
return false;
} else if(selections.length != 1) {
Ext.Msg.alert('提示','不能選擇多條資料');
return false;
}
return true;
},
selectMany:function() {
var selections = this.gridPanel.getSelectionModel().getSelections();
if(selections.length == 0) {
Ext.Msg.alert('提示','至少選擇一條資料');
return false;
}
return true;
}
});
UserManagePanel:
注意我的繼承是可以對gridPanel的按鈕進行添加的，也就是可以在CrudPanel之上很輕松的加上其他的擴充功能，可能是比較友善的，但是還沒有經過充分認證
UserManagePanel = Ext.extend(Ext.Afi.CrudPanel,{
id:'user',
baseUrl:'yonghu',
title:'使用者管理',
iconCls:'tabs',
storeMapping:[
{name:'user.id',mapping:'id'},
{name:'user.realName',mapping:'realName'},
{name:'user.age',mapping:'age'}
],
createForm:function() {
var formPanel = new Ext.form.FormPanel({
baseCls:'x-plain',
labelWidth:65,
defaults:{
xtype:'textfield',
allowBlank:false,
anchor:'95%'
},
items:[{
xtype:'hidden',
fieldLabel:'使用者編号',
name:'user.id'
},{
fieldLabel:'<font color=red>真實姓名</font>',
name:'user.realName'
},{
fieldLabel:'<font color=red>年齡</font>',
name:'user.age'
}]
});
return formPanel;
},
createWin:function() {
return this.initWin(300,150);
},
createToolbar:function() {
var tbar = new Ext.Toolbar([{
text:'添加',
iconCls:'add',
handler:this.create.createDelegate(this)
},{
text:'修改',
iconCls:'edit',
handler:this.edit.createDelegate(this)
},{
text:'删除',
iconCls:'del',
handler:this.del.createDelegate(this)
},{
text:'重新整理',
iconCls:'refresh',
handler:this.refresh.createDelegate(this)
}]);
return tbar;
},
constructor:function() {
this.sm = new Ext.grid.CheckboxSelectionModel();
this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
this.sm,
{header:'使用者編号',dataIndex:'user.id'},
{header:'真實名稱',dataIndex:'user.realName'},
{header:'年齡',dataIndex:'user.age'}
]);
UserManagePanel.superclass.constructor.call(this);
}
});
struts.xml
<action name="yonghu" class="userAction" method="userCommand">
<result name="list" type="json">
<param name="root">page</param>
<param name="excludeProperties">start,limit,conditions</param>
</result>
<result name="save" type="json">
<param name="includeProperties">success</param>
</result>
<result name="update" type="json">
<param name="includeProperties">success</param>
</result>
<result name="remove" type="json">
<param name="includeProperties">success</param>
</result>
</action>
userAction
到這裡你應該看明白一些東西了，但是可能比較精妙的地方在于我的action中很少有用request.getParameter去擷取實體的參數比如user 的id,realName,age等,如果你熟悉struts2這個地方是我根據struts2的OGNL表達式來操作的，你需要自己看我的CrudPanel 種有個id屬性，根據不同的實體寫不同實體的實力名稱就可以
package com.smdc.personnel.action;
import java.util.List;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.smdc.personnel.domain.User;
import com.smdc.personnel.service.IUserService;
import com.smdc.personnel.vo.Page;
@SuppressWarnings("serial")
public class UserAction extends ActionSupport {
private IUserService userService;
private Page page;
private User user;
private boolean success;
public String userCommand() {
String cmd = ServletActionContext.getRequest().getParameter("cmd");
if("list".equals(cmd)) {
int start = Integer.parseInt(ServletActionContext.getRequest().getParameter("start"));
int limit = Integer.parseInt(ServletActionContext.getRequest().getParameter("limit"));
getUserByPage(start,limit);
} else if("save".equals(cmd)) {
addUser();
} else if("update".equals(cmd)) {
updateUser();
} else if("remove".equals(cmd)) {
String ids = ServletActionContext.getRequest().getParameter("ids");
deleterUser(ids);
}
return cmd;
}
private void deleterUser(String ids) {
String[] idsArray = ids.split(",");
try {
for(int i=0; i<idsArray.length; i++) {
int id = Integer.parseInt(idsArray[i]);
System.out.println(id);
user = userService.findUserById(id);
userService.delUser(user);
}
success = true;
} catch (Exception e) {
e.printStackTrace();
}
}
private void updateUser() {
try {
userService.updateUser(user);
success = true;
} catch (Exception e) {
e.printStackTrace();
}
}
private void addUser() {
try {
userService.addUser(user);
success = true;
} catch (Exception e) {
e.printStackTrace();
}
}
private void getUserByPage(int start, int limit) {
page = new Page();
page.setStart(start);
page.setLimit(limit);
try {
List<User> root = userService.findUserByPage(page);
int totalCount = userService.getUserTotalCount(page);
page.setRoot(root);
page.setTotalCount(totalCount);
page.setSuccess(true);
} catch (Exception e) {
e.printStackTrace();
}
}
public IUserService getUserService() {
return userService;
}
public void setUserService(IUserService userService) {
this.userService = userService;
}
public Page getPage() {
return page;
}
public void setPage(Page page) {
this.page = page;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
}
以上便是我的一些愚蠢之見，可能裡面有很多思想上的錯誤，希望真正的高手指點，同時也感謝腳本娃娃，大漠老師等一群高手的指點（并非廣告）。
如果您覺得我這是一派胡言，或者我是個傻逼，或者覺得有什麼地方需要讨論的都可以給我發郵件：[email protected].也可以給我留言，恩先這樣了，太晚了，哎
![前後端分離之跨域問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)