Ext之可能是用起来比较方便的增删改查Panel

本来是想早点回家把这个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()/*[{
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)
}]*/,
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;
 }

}

 

以上便是我的一些愚蠢之见，可能里面有很多思想上的错误，希望真正的高手指点，同时也感谢脚本娃娃，大漠老师等一群高手的指点（并非广告）。

如果您觉得我这是一派胡言，或者我是个傻逼，或者觉得有什么地方需要讨论的都可以给我发邮件：[e-mail].也可以给我留言，恩先这样了，太晚了，哎

评论

2 楼 afi 2010-12-26  

由于公司加班，有机会我会共享出来的，或许过一点时间会更新一个牛叉的项目也不一定大家拭目以待吧

1 楼 z赵杰 2010-12-21  

     能不能上几张图啊、  这样更清晰