Extjs 中的GridPanel学习例子二
Ext.onReady(function(){//建立列模型var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}, {header:'名称',dataIndex:'name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}, {header:'描述',dataIndex:'descn',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}]);//数据的Json格式var data=[ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5']];//数据的处理中心,主要有两个重点的熟悉:proxy(负责如何获取数据),reader(负责如何解释数据)var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'id'},//对应着列模型的id {name:'name'},//对应着列模型的name {name:'descn'}//对应着列模型的descn ])});//自定义对象var Record = new Ext.data.Record.create([ {name:'id',type:'string'}, {name:'name',type:'name'}, {name:'descn',type:'descn'}]);store.load();//GridPanel,这里的EditorGridPanel继承了父类var grid = new Ext.grid.EditorGridPanel({renderTo:'myid',cm:cm, width:450, height:130,store:store,loadMask:true,tbar:new Ext.Toolbar(['-', {text:'添加一行', handler:function(){ // alert("add"); var initValue={id:'',name:'',descn:''}; var p = new Record(initValue); grid.stopEditing(); store.insert(0,p); grid.startEditing(0,0); p.dirty=true, p.modified=initValue; if(store.modified.indexOf(p)==-1){ store.modified.push(p); } } }, '-', {text:'删除一行', handler:function(){ // alert("delete"); Ext.Msg.confirm('信息','确定要删除',function(btn){ if(btn=='yes'){ var sm = grid.getSelectionModel(); var cell = sm.getSelectedCell(); var record = store.getAt(cell[0]); store.remove(record); } }); } }, '-', {text:'保存', handler:function(){ var m = store.modified.slice(0); for(var i=0;i<m.length;i++){ var record = m[i]; var fields=record.fields.keys; for(var j=0;j<fields.length;j++){ var name = fields[j]; var value = record.data[name]; var collIndex = cm.findColumnIndex(name);//取得列索引 var rowIndex = store.indexOf(record.id);//取得行的索引 var editor =cm.getCellEditor(collIndex).field; if(!editor.validateValue(value)){ Ext.Msg.alert('提示','请确保输入的数据正确',function(){ grid.startEditing(rowIndex,collIndex); }); return; } } } var jsonArray=[]; Ext.each(m,function(item){ jsonArray.push(item.data); }); //提交 Ext.lib.Ajax.request( 'POST', 'grid.jsp', {success:function(response){ Ext.Msg.alert('信息',response.responseText,function(){ store.reload(); }); },failure:function(){ Ext.Msg.alert('错误','与后台联系的时候出现问题'); }}, 'data='+encodeURIComponent(Ext.encode(jsonArray))//吧EditorGrid的数据封装成json,传到后台 ); } }, '-']),viewConfig:{ forceFit:true } });});?