您的位置：首页 > Web前端 > JavaScript

ExtJS EditorGridPanel 示例之Array格式Store前后台增删改查（不支持分页）

2010-08-27 13:40 417 查看
示例入口页面html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<title>用户数据编辑 User EditorGridPanel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
	<meta http-equiv="author" content="hoojo">
    <meta http-equiv="email" content="hoojo_@126.com">
    <meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
	<link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext2/ext-all.js"></script>
	<script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script>
	<script type="text/javascript" src="UserEditorGridPanel.js"></script>
	<script type="text/javascript">		
		Ext.onReady(function (){
			Ext.QuickTips.init();
			//Ext.form.Field.prototype.msgTarget = "side";
			
			Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";
		
			new UserEditorGridPanel();
		});
	</script>
	</head>
	<body>

	</body>
</html>




UserEditorGridPanel.js：

/**
 * 用Array格式的数据形式：Ext.data.SimpleStore，默认数组解析器，实现editorGrid的增删改查
 * 上一示例扩展了ArrayReader组件就支持分页，这里用默认的就不支持分页了；
 * author: hoojo
 * email: hoojo_@126.com
 * blog: http://blog.csdn.net/IBM_hoojo  * ext-lib: v2.2
 */
/****************************************************************/
					/*******UserEditorGridPanel*******/
/****************************************************************/
UserEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
	sexCombo: null,
	inserted: [],
	constructor: function () {
	
		this.sexCombo = new Ext.form.ComboBox({
			mode: "local",
			value: "全部",
			readOnly: true,
			triggerAction: "all",
			displayField: "sex",
			//listAlign : "bl-tl", //下拉列表的显示方式 bl-tl是在上方显示，相反tl-bl是从下方显示
			store: new Ext.data.SimpleStore({
				data: ["男", "女", "全部"],
				expandData: true,
				fields: ["sex"]
			}),
			listeners: {
				"select": {
					fn: this.filterSex,
					scope: this
				}
			}
		});
		
		this["store"] = new Ext.data.SimpleStore({	
				autoLoad: true,
				url: UserEditorGridPanel.USER_STORE_URL,
				fields: ["id","name", 
					"age", "sex", 
					{name: "birthday", type: "date", dateFormat: "Y-m-d"}
				],
				sortInfo:{field:"name", direction:"ASC"} //排序
			});
		
		UserEditorGridPanel.superclass.constructor.call(this, {
			renderTo: Ext.getBody(),
			width: 480,
			height: 300,
			frame: true,
			stripeRows: true,
			clicksToEdit: 2, //表示点击多少次数才可以编辑表格
			collapsible: true, //是否在右上角显示收缩按钮
			animCollapse: true, //表示收缩（闭合）面板时，显示动画效果
			trackMouseOver: true, //鼠标在行上移动时显示高亮
			enableColumnMove: false,//禁止用户拖动表头
			autoExpandColumn: "name", //这里指定的name的id ，此属性可以根据当前列 填充空白区域
			title: "用户数据编辑器",			
			tbar: [
				"查看方式：",
				this.sexCombo,
				"-",
				{
					text: "保存数据",					
					handler: this.onCommitStore,
					scope: this
				}
			],
			bbar: [{
				text: "添加数据",
				handler: this.onAddClick,
				scope: this
			},"-",{
				text: "删除数据",
				handler: this.onRemoveClick,
				scope: this
			}],
			columns:[{
				id: "name",
				header: "姓名",
				align: "center",
				dataIndex: "name",
				editor: new Ext.form.TextField({
					allowBlank: false,
					blankText: "姓名不能为空，必须输入"
				})
			},{
				header: "年龄",
				align: "center",
				dataIndex: "age",
				editor: new Ext.form.NumberField({
					allowBlank: false,
					allowNegative: false, //只能为正数
					//maxValue: 1000000000,
					grow: true, //前半部分显示正在改的数据，后半部分显示以前的老数据
					selectOnFocus: true, //当获得焦点时，选中所有的文本内容
					minValue: 1
				})
			},{
				header: "性别",
				align: "center",
				dataIndex: "sex",
				editor: new Ext.form.ComboBox({
					mode: "local",					
					value: "男",
					readOnly: true,
					displayField: "sex",
					triggerAction: "all",										
					store: new Ext.data.SimpleStore({
						data: ["男", "女"],
						expandData: true,
						fields: ["sex"]
					})
				})
			},{
				header: "生日",
				align: "center",
				sortable: true,
				dataIndex: "birthday",
				renderer: Ext.util.Format.dateRenderer('Y-m-d'),
				editor: new Ext.form.DateField({
					format: "Y-m-d",
					minValue: "1950-01-01",
					disabledDays: [0, 7],//datefield的第0列：周日和第7列：周六不能编辑
					disabledDaysText: "周末不能选择"
				})
			}],
			sm: new Ext.grid.RowSelectionModel({
				singleSelect: true
			})
			
		});
		
		/*Ext.Ajax.on("requestcomplete", function (conn, response, options) {
			alert(response.responseText);
		});*/
	},
	filterSex: function (cob) {
		if (cob.getValue() == "全部"){
			this.store.clearFilter();
		}
		else
			this.store.filter("sex", cob.value);
	},
	onAddClick: function () {
		var rs = new Ext.data.Record({id: "",name: "", age: 1, sex: "", birthday: 0000-00-00});
		this.getStore().add(rs);
		rs.set("name", "ext");
		rs.set("age", 22);
		rs.set("sex", "男");
		rs.set("birthday", new Date());
		this.inserted.push(rs);
		this.startEditing(this.store.getCount() - 1, 0);
	},
	saveInsertData: function (conn, response) {
		var xml = response.responseXML;
		var root = xml.documentElement;
		for (var i = 0; i < root.childNodes.length; i++) {
			this.inserted[i].set("id", root.childNodes[i].text);
		}
		this.getStore().commitChanges();
		this.inserted = [];
	},
	onCommitStore: function () {
		var mf = this.getStore().modified;
		var temp = [];
		for (var i = 0; i < mf.length; i ++) {
			if (mf[i].get("id") == ""){
				continue;
			}
			var data = {};
			for (var j in mf[i].modified) {
				data[j] = mf[i].get(j);
			}
			temp.push(Ext.apply(data, {id: mf[i].get("id")}));			
		}
		
		for (var i = 0; i < this.inserted.length; i ++) {
			temp.push(this.inserted[i].data);
		}
		Ext.Ajax.on("requestcomplete", function (conn, response, options) {
			alert(response.responseText);
		});
		//Ext.Ajax.on("requestcomplete", this.saveInsertData, this);
		//想服务器发送请求，传递修改的数据（只含修改的数据）
		Ext.Ajax.request({url: "../ServiceServlet?method=edit", params: {content:Ext.util.JSON.encode(temp)}});
		this.store.commitChanges();		
		this.filterSex(this.sexCombo);
	},
	onRemoveClick: function () {
		var rs = this.getSelectionModel();
		try{
			if (rs.getCount() == 0) {
				Ext.Msg.alert("系统提示", "没有选定数据，请选择数据行！");
				
			}else {
				Ext.Msg.confirm("系统提示", "您确定要删除当前数据吗？", this.removeUserInfo, this);
			}
		}catch(er) {
			Ext.Msg.alert("系统提示", er.discription);
		}
	},
	removeUserInfo: function (btnText) {
		if (btnText == "yes"){
			var rs = this.getSelectionModel().getSelected();
			this.getStore().remove(rs);
			
			if (rs.get("id") != "") {
				Ext.Ajax.on("requestcomplete", function (conn, response, options) {
					if (response.responseText == "success") {
						alert("success");
					}else {
						alert("failure");
					}
				});
				Ext.Ajax.request({url: "../ServiceServlet?method=remove", params: {id:rs.get("id")}});
			}else {				
				this.inserted.remove(rs);
				//this.getStore().modified.romove(rs);
			}
		}
	}
	
});
UserEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=all";




后台增删改查方法Servlet 代码：

import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hoo.dao.IUser;
import com.hoo.dao.impl.UserDao;
import com.hoo.entity.UserInfo;

@SuppressWarnings({"unchecked", "serial"})
public class ServiceServlet extends HttpServlet {
	
	private IUser dao = new UserDao();
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("GBK");
		PrintWriter out = response.getWriter();
		
		StringBuilder builder = new StringBuilder();
		String method = request.getParameter("method"); 
		if ("all".equals(method)) {
			List<UserInfo> list = dao.loadUserInfo();
			
			builder.append("[");
			for (int i = 0; i < list.size(); i++) {
				UserInfo u = (UserInfo) list.get(i);
				builder.append("[/"").append(u.getId())
				.append("/",/"").append(u.getName())				
				.append("/",").append(u.getAge())
				.append(",/"").append(u.getSex())
				.append("/",/"").append(u.getBirthday())
				.append("/"]");
				if (i < list.size()-1) {
					builder.append(",");
				}
			}
			builder.append("]");
			
			out.write(builder.toString());
		}
		if ("edit".equals(method)) {
			String content = request.getParameter("content");
			
			out.print(content);
		}
		
		if ("remove".equals(method)) {
			Integer id = Integer.parseInt(request.getParameter("id"));
			if (dao.removeUserInfo(id)) {
				out.print("success");
			}else {
				out.print("failure");
			}
		}
		out.flush();
		out.close();
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}

}








插入图片以示真相，确实用默认的ArrayReader是不能分页。就算加上Ext.PagingToolbar分页工具条也是枉然，只是个摆设

不能分页的，但可以结合静态数据分页的store还是可以的；见：http://blog.csdn.net/IBM_hoojo/archive/2010/08/19/5823820.aspx
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航