可编辑的gridPanel json数据源

Ext.onReady(function() {
			var data = [{
						id : 1,
						name : '小王',
						email : '[email protected]',
						sex : '男',
						bornDate : '1991-4-4'
					}, {
						id : 2,
						name : '小李',
						email : '[email protected]',
						sex : '男',
						bornDate : '1992-5-6'
					}, {
						id : 3,
						name : '小兰',
						email : '[email protected]',
						sex : '女',
						bornDate : '1993-3-7'
					}];
			var store = new Ext.data.JsonStore({
						data : data,
						fields : ["id", "name", "sex", "email", {
							type : "date",
							name : "bornDate",
							dateFormat : "Y-n-j" // 年月日格式用Y-n-j，带时分秒则用Y-m-d
								// H:i:s
							}]
					});
			var colM = new Ext.grid.ColumnModel([{
						header : '序号',
						dataIndex : 'id'
					}, {
						header : "姓名",
						dataIndex : "name",
						sortable : true,
						editor : new Ext.form.TextField()// 编辑控件-文本框
				}	, {
						header : "性别",
						dataIndex : "sex",
						editor : new Ext.form.ComboBox({// 编辑控件-下拉框
									transform : "sexList", //sexList是一个传统的<select>框，我们需要在html 页面中直接定义
														   //<select id="sexList"><option>男</option><option>女</option></select>
														   //(Ext会自动把它处理貂的，我们不用设置这个下拉框隐藏)
									triggerAction : 'all',
									lazyRender : true
								})
					}, {
						header : "出生日期",
						dataIndex : "bornDate",
						width : 120,
						renderer : Ext.util.Format.dateRenderer('Y年m月d日'), //日期渲染格式、带时分秒则用('Y-m-d H:i')
						editor:new Ext.form.DateField({format:'Y年m月d日'}) // 编辑控件-日期控件
				}	, {
						header : "电子邮件",
						dataIndex : "email",
						sortable : true,
						editor : new Ext.form.TextField()
					}]);
			var grid = new Ext.grid.EditorGridPanel({
						id:'editGrid',
						renderTo : document.body,
						title : "学生基本信息管理",
						height : 200,
						width : 600,
						cm : colM,
						store : store,
						autoExpandColumn : 3,
						clicksToEdit:1  //表示点击一次单元格即触发编辑，因为默认情况下该值为2，需要双击单元格才能编辑
					});
					
			grid.on("afteredit",function(obj){  //编辑完后一般都得把数据更新到数据库啊什么的，给 grid 绑定下事件afteredit就好
				var r=obj.record;
				var id=r.get("id");
				var name=r.get("name");
				alert("id="+id+",name="+name);
				//....  Ajax 更新 ... 这里就不写了
			});		
		});
		
		
		

 

 

 一般都还想做个 grid 能随着窗口大小改变自调整宽、高的功能，好像和谐一些，加下边一段代码就好

 

 function canvasAutoFit(gridObj) {  //让grid能自调整宽、高度
		//gridObj.setHeight(window.document.body.clientHeight - 250);
		gridObj.setWidth(window.document.body.clientWidth);
		gridObj.syncSize();
	}

	window.onresize = function() { //改变窗口大小的时候调用自调整方法
		canvasAutoFit(Ext.getCmp('editGrid'));
	}