Ext可编辑grid

 

//创建recode结构
	     var recode =Ext.data.Record.create([
	     		{name:"productProjectId",mapping:0},
	     		{name:"productName",mapping:1},
	     		{name:"searchBtn",mapping:2},
	     		{name:"productNum",mapping:3},
	     		{name:"accountMoney",mapping:4},
	     		{name:"costMoney",mapping:5}
	     	]);
	     //创建data
	     var data =[];
	     //创建reader
	     var reader =new Ext.data.ArrayReader({},recode);
	     //创建一个store返回规范的recode对象
	     var store =new Ext.data.Store(
	              {
	              	  proxy:new Ext.data.MemoryProxy(data),
	            	  reader:reader,
	                pruneModifiedRecords :true
	              });
	     //加载数据
	     store.load();
		
		//定义表格编号
		var rowNumber = new Ext.grid.RowNumberer({
			sortable: true
		})
		//创建列
		var cm = new Ext.grid.ColumnModel([
			//rowNumber,
			{
				header: 'productProjectId',
				dataIndex: 'productProjectId',
				hidden: true,
				sortable:true,
				editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))
			},					
			{
				header:"商品/项目",
				dataIndex:"productName",
				sortable:true,
				editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true,readOnly:true}))
			},
			{
				header:"操作",
				dataIndex: 'searchBtn',
				align: 'center',
				renderer:function(){
					return '<img src=\"'+ ctxPath +'/resource/image/systemIcon/47.png\" style=\"cursor:pointer;\" onclick=\"javascript:settleBtnExp();\" />';
				}
			},					
			{
				header:"数量",
				dataIndex:"productNum",
				sortable:true,
				editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
																		allowBlank:true,
																		maxLength:3
																		}))
			},					
			{
				header:"应收金额",
				dataIndex:"accountMoney",
				sortable:true,
				editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,readOnly:true}))
			},		
			{
				header:"实收金额",
				dataIndex:"costMoney",
				sortable:true,
				editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true}))
			}					
		]);	
    	
		
	    var tbar = new Ext.Toolbar({
		     items:[{
			       text: "添加一行",
			       iconCls:"blist",
			       handler:function(){
			      		//定义一个recode对象
					    var initValue={productProjectId:"",productName:"",searchBtn:"",productNum:"",accountMoney:"",costMoney:""};
					    var p =new recode(initValue); //根据上面创建的recode 创建一个默认值
						grid.stopEditing();
						store.insert(0,p);//在第一个位置插入
						grid.startEditing(0,1);//指定的行/列，进行单元格内容的编辑
						p.dirty=true;
						p.modified=initValue;
						if(store.modified.indexOf(p)==-1){
					         store.modified.push(p);
      					 }
			       }
			 },"-",{
			       text:"删除",
			       iconCls:"delCls",
			       handler:function(){
					 	var sm = grid.getSelectionModel();
					 	var cell = sm.getSelectedCell();
						if (Ext.isEmpty(cell)) {
							Ext.Msg.alert('提示', '你没有选中行');
							return ;
						}
						var record = store.getAt(cell[0]);
						Ext.MessageBox.confirm('确认', '你确认要删除'+record.get('productName')+'这行吗?', function(btn){  
		            		if(btn=='yes'){  
								store.remove(record);
							}
		            	});
		              /* 此种方法用于带单选按钮的gridCheckboxSelectionModel	
		              var ds = grid.getStore();
						var selectedRow = grid.getSelectionModel().getSelected();
						if(selectedRow){
							Ext.MessageBox.confirm('确认', '你确认要删除这行吗?', function(btn){  
			            		if(btn=='yes'){  
									ds.remove(selectedRow);
								}
			            	});
		            	}else{
		            		Ext.Msg.alert("提示", "请选择一条需要删除的记录！");
		            	}*/
			       }
		     }]
	    });	
	    
	    // 定义分页条
	    var bbar = getBarPaging(store, 'dtlBbarExt', false, function (){
	    	//var keyId = Ext.getCmp("settleId").getValue();
   			store.reload({
				params : {
					start : 0,
					limit : bbar.pageSize
					//'memberSettleAccount.settleId': keyId
				}
			});	    	
	    });	    
	    
		var grid = new Ext.grid.EditorGridPanel({
			columnWidth : 1,
			height: 200,
			store: store,
			cm: cm,
			id: 'listGridDtlExp',
			clicksToEdit : 1, // 单击、双击进入编辑状态
			autoScroll : true,
			stripeRows: true, // 斑马线			
			loadMask: true,
			loadMask: {
				msg:'正在加载数据.....'
			},
			tbar: tbar,
			//bbar: bbar,
			frame: true
		})	

// 检查新增行的可编辑单元格数据合法性

var m = gridstore.modified.slice(0);
					for (var i = 0; i < m.length; i++) {
						var record = m[i];
						var rowIndex = store.indexOfId(record.id);
						var value = record.get(colName);
						if (Ext.isEmpty(value)) {
							// Ext.Msg.alert('提示', '数据校验不合法');
							return false;
						}
						var colIndex = cm.findColumnIndex(colName);
						var editor = cm.getCellEditor(colIndex).field;
						if (!editor.validateValue(value)) {
							// Ext.Msg.alert('提示', '数据校验不合法');
							return false;
						}
					}