Ext用表格显示数据即增、删、改的完整实例
1、页面js
2、后台处理的MenuMgr.java
/**
* 菜单管理
*/
var menuMgr = function() {
var menuForm;// 菜单表单
var window;// 窗口
var gridPanel;// 表格
var dataStore;// 数据集
return {
init : function() {
var Menu = new Ext.data.Record.create([ {
name : 'idno'
}, {
name : 'name'
}, {
name : 'img'
}, {
name : 'url'
}, {
name : 'parentid'
}, {
name : 'sort'
}, {
name : 'oper'
}]);
// var fields = ['idno', 'name', 'img', 'url', 'parentid',
// 'sort','oper'];
// 顶部工具栏
var topBar = new Ext.Toolbar([ {
text : '新增菜单',
iconCls : 'add',
handler : menuMgr.showAddMenuWindow
// 注意函数名后不能加()
}, {
text : '查看修改',
iconCls : 'edit',
handler : menuMgr.showEditMenuWindow
}, {
text : '删除菜单',
iconCls : 'delete',
handler : menuMgr.delMenu
}
]);
var sm = new Ext.grid.CheckboxSelectionModel();// 定义复选框选择模式
var columnModel = new Ext.grid.ColumnModel([sm, {
header : "idno",
dataIndex : "idno",
sortable : true
}, {
header : "菜单名称",
dataIndex : "name",
sortable : true
}, {
header : "图片",
dataIndex : "img",
width : 40,
align : 'center',
// 渲染
renderer : function(imgUrl) {
return "<img src='../../images/" + imgUrl + "'/>"
}
}, {
header : "url",
dataIndex : "url",
width : 150,
sortable : false
}, {
header : "上级菜单",
dataIndex : "parentid",
sortable : true
}, {
header : "排序",
dataIndex : "sort",
sortable : true
}, {
header : "备注",
dataIndex : "oper"
}]);
var storeCfg = {};// 数据集配置对象
storeCfg['url'] = 'server.jsp';
storeCfg['recordName'] = "Menu";
storeCfg['record'] = Menu;
dataStore = Ext.dream.createStore(storeCfg);
var gridCfg = {};// 表格配置对象
// cfg['fields'] = fields;
gridCfg['dataStore'] = dataStore;
gridCfg['tbar'] = topBar;
gridCfg['columnModel'] = columnModel;
gridCfg['pageSize'] = 4;
gridCfg['sm'] = sm;
gridPanel = Ext.dream.createGridPanel(gridCfg);
Ext.main.createViewPort(gridPanel);
},
/**
* 创建增加、修改公共菜单
*/
createMenuWindow : function() {
var cfg = {};// 组合框配置
cfg['fieldLabel'] = '父菜单';
cfg['url'] = 'comboServer.jsp';
cfg['recordType'] = 'Menu', cfg['fields'] = ['name', 'idno'];
cfg['name'] = 'parentid';
var parentMenu = Ext.combo.createComboBox(cfg);
window = new Ext.Window( {
title : '<div align="left">增加菜单</div>',
x : 150,
y : 100,
frame : true,
modal : true,
closable : true,
animCollapse : true,// 可关闭
// 设置面板可展开收缩
collapsible : false,
resizable : false,
// 配置登录表单
items : [menuForm = new Ext.form.FormPanel( {
id : 'menuForm',
width : 400,
frame : true,
border : false,
labelAlign : 'right',
items : [new Ext.form.TextField( {
name : 'idno',
value : '0',
inputType : 'hidden'
}),
new Ext.form.TextField( {
fieldLabel : '菜单名称',
id : 'name',
name : 'name',
allowBlank : false,
blankText : '菜单名称不能为空',
width : 200,
msgTarget : 'side'
}), new Ext.form.TextField( {
fieldLabel : '图片名称',
id : 'img',
name : 'img',
allowBlank : false,
blankText : '图片名称不能为空',
width : 200,
msgTarget : 'side'
}), new Ext.form.TextField( {
fieldLabel : '链接地址',
id : 'url',
name : 'url',
allowBlank : false,
blankText : '链接地址不能为空',
width : 200,
msgTarget : 'side'
}), parentMenu, new Ext.form.TextField( {
fieldLabel : '排序',
id : 'sort',
name : 'sort',
allowBlank : true,
width : 200,
msgTarget : 'side'
}), new Ext.form.TextField( {
fieldLabel : '备注',
id : 'oper',
name : 'oper',
allowBlank : true,
width : 200,
msgTarget : 'side'
})]
})]
,// 表单设置结束
});// window结束
},
/**
* 显示增加菜单窗口
*/
showAddMenuWindow : function() {
menuMgr.createMenuWindow();
window.addButton(new Ext.Button( {
text : '提交',
// 点击提交执行的函数
handler : menuMgr.addMenu
}));
window.show();
},
/**
* 显示查看修改菜单窗口
*/
showEditMenuWindow : function() {
menuMgr.createMenuWindow();
window.addButton(new Ext.Button( {
text : '提交',
// 点击提交执行修改的函数
handler : menuMgr.updateMenu
}));
if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
return;
} else {
if (Ext.validate.selectedMore(gridPanel)) {// 选中多条
return;
} else {
var idno = "";
idno = Ext.validate.getSelected(gridPanel, 'idno');
var cfg = {};
cfg['form'] = menuForm;
cfg['url'] = 'loadForm.jsp?idno=' + idno;
Ext.dao.loadFormData(cfg);
window.show();
}
}
},
/**
* 提交增加菜单表单
*/
addMenu : function() {
var Menu = {};
Menu = Ext.dao.getObjFromForm(menuForm);
MenuManager.addMenu(Menu, function(success) {
window.close();
if (success) {
// 重新加载数据
dataStore.reload(dataStore);
Ext.MessageBox.alert("提示", "增加菜单成功");
// Msg.suggest("提示","增加菜单成功");
} else {
Ext.MessageBox.alert("提示", "增加菜单失败");
}
});
},
/**
* 更新菜单
*/
updateMenu : function() {
var Menu = {};
Menu = Ext.dao.getObjFromForm(menuForm);
MenuManager.updateMenu(Menu, function(success) {
window.close();
if (success) {
// 先清空再重新加载数据
dataStore.removeAll();
dataStore.reload();
Ext.MessageBox.alert("提示", "更新菜单成功");
} else {
Ext.MessageBox.alert("提示", "更新菜单失败");
}
});
},
/**
* 删除菜单
*/
delMenu : function() {
if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
return;
} else {
Ext.Msg.confirm('<font color="red">提示</font>', '你确定要删除选中的菜单吗？',
menuMgr.deleteOrNot);
};
},
/**
* 是否删除
*/
deleteOrNot : function(id) {
if (id == "yes") {
var idnos = "";
idnos = Ext.validate.getSelected(gridPanel, 'idno');
MenuManager.batchDelMenuByPKs(idnos, function(success) {
if (success) {
// 服务器端删除后，客户端同步更新
// 获取选中的复选框所表示的对象数组
var records = gridPanel.getSelectionModel()
.getSelections();
for (i = 0;i < records.length; i++) {
dataStore.remove(records[i]);
}
Ext.MessageBox.alert("提示", "删除菜单成功");
} else {
Ext.MessageBox.alert("提示", "删除菜单失败");
}
})
} else {
return;
}
}
}
}();
Ext.onReady(menuMgr.init, menuMgr, true);
2、后台处理的MenuMgr.java
package com.dreamoa.dwrservice.menuMgr;
import org.apache.log4j.Logger;
import com.dreamoa.domain.Menu;
import com.dreamoa.sys.BaseDAO;
import com.dreamoa.util.RandomUtil;
import com.dreamoa.util.StringUtil;
/**
* 实现菜单的增、删、改操作
* @author 忧里修斯
*/
public class MenuMgr extends BaseDAO<Menu>{
Logger log = Logger.getLogger(MenuMgr.class);
/**
* 增加菜单
* @param menu
*/
public boolean addMenu(Menu menu){
try {
menu.setIdno(RandomUtil.GenPrimaryKey());
beginTransaction();
save(menu);
commit();
return true;
} catch (RuntimeException e) {
log.error("MenuMgr.java：addMenu(),增加菜单失败");
e.printStackTrace();
return false;
}
}
/**
* 更新菜单
* @param menu
*/
public boolean updateMenu(Menu menu){
try {
beginTransaction();
update(menu);
commit();
return true;
} catch (RuntimeException e) {
log.error("MenuMgr.java：updateMenu(),更新菜单失败");
e.printStackTrace();
return false;
}
}
/**
* 根据主键删除菜单
* @param idno
* @return
*/
public boolean delMenuByPK(String idno){
try {
beginTransaction();
deleteById("idno", idno);
commit();
return true;
} catch (RuntimeException e) {
log.error("MenuMgr.java：delMenuByPK(),删除菜单失败");
e.printStackTrace();
return false;
}
}
/**
* 批量删除菜单
* @param idnos
* @return
*/
public boolean batchDelMenuByPKs(String idnos){
beginTransaction();
try {
String[] idnoArr = StringUtil.split(idnos, ",");
for (int i = 0; i < idnoArr.length; i++) {
String idno = idnoArr[i];
deleteById("idno", idno);
}
} catch (RuntimeException e) {
log.error("MenuMgr.java：batchDelMenuByPKs(),批量删除菜单失败");
rollback();
e.printStackTrace();
return false;
}
commit();
return true;
}
}