本来是想早点回家把这个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=)