Ext用表格显示数据即增、删、改的完整实例

1、页面js

/**
 * 菜单管理
 */
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;
	}
}