可编辑的gridPanel json数据源

sric08

Ext.onReady(function() {var data = [{id : 1,name : '小王',email : 'xiaowang@easyjf.com',sex : '男',bornDate : '1991-4-4'}, {id : 2,name : '小李',email : 'xiaoli@easyjf.com',sex : '男',bornDate : '1992-5-6'}, {id : 3,name : '小兰',email : 'xiaoxiao@easyjf.com',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'));}