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 }
	  
	});
	
});