Extjs4 可编辑grid实例

MemberEditGrid = Ext.extend(Ext.grid.Panel, {
	_proId:0,
	constructor : function(_config) {
		if (_config == null)
			_config = {};
		Ext.apply(this, _config);
		this.canFlag = false;
		this.monCorr = true;
		if( this._tab._topPanel._grid.getSelectionModel().selected.length > 0)
			this._proId = this._tab._topPanel._grid.getSelectionModel().selected.items[0].get('guId');
		this['rowEditing'] = Ext.create('Ext.grid.plugin.RowEditing', {
	        clicksToMoveEditor: 1,
	        autoCancel: false
	    });
		this["store"] = {
		//	autoLoad : true,
			proxy : {
				type : 'ajax',
				url : "xmgk/xm-member-manage.action",
				reader : {
					type : 'json',
					root : 'rows',
					totalProperty : "totalCount"
				}
			},
			model : 'XmMember',
			listeners : {
				'load' : {
					fn : this.loadHander,
					scope : this
				}
			}
		};

		this['columns'] = [ {
			text : '姓名',
			flex : 1,
			dataIndex : 'name',
            editor: {
                allowBlank: false
            }
		},  {
			text : '单位',
			flex : 1,
		
			dataIndex : 'danwei',
            editor: {
	                allowBlank: false
			
            }
		}, {
			text : '性别',
			flex : 1,
			//id : 'sex',
			dataIndex : 'sex',

            editor: {
				 allowBlank: false
            }
		}, {
			text : '出生年月',
			flex : 1,
			xtype : 'datecolumn',
			format : 'Y-m',
			dataIndex : 'csny',
            editor: {
				xtype: 'datefield',
	            format: 'Y-m',
                allowBlank: false
            }
		}, {
			text : '技术职称',
			flex : 2,
			dataIndex : 'jszc',
            editor: {}
		} ,{
			text : '专业',
			flex : 1,
			dataIndex : 'zy',
            editor: {
				 allowBlank: false
            }
		}, {
			text : '承担的主要工作',
			flex : 2,
			dataIndex : 'cddzygz',
            editor: {}
		}  ,{
			text : '投入月数',
			flex : 1,
			dataIndex : 'trys',
            editor: {
				 allowBlank: false
            }
		}]
		MemberEditGrid.superclass.constructor.call(this, {
			height : 230,
			title : '项目人员',
			plugins: [this.rowEditing],
			tbar : [ {
				text : "增加人员",
				iconCls : "tbnt_addrow",
				handler : this.onAddRow,
				scope : this
			}, "-", {
				text : "删除人员",
				iconCls : "tbnt_del",
				handler : this.onDelRow,
				scope : this
			},"-", {
				text : "保存",
				iconCls : "tbnt_save",
				handler : this.onSave,
				scope : this
			}],
			viewConfig : {
				stripeRows : true,
				enableTextSelection : true
			}
		});
	},
	loadHander : function(_load,_datas){
		if(this._period> this.store.totalCount){
			var _size = this._period -this.store.totalCount;
			for(var i=0;i<_size;i++)
				this.store.add(new PeriodSet());
		}
	},
	onAddRow : function(){
        var _ps = new XmMember();
        var _index = this.store.getCount()-1;
        this.store.insert(_index,_ps);
	},
	onSave : function(){
		var guId = this._tab._topPanel._memberGrid.getSelectionModel().selected.items[0].get('guId');
		
       var _res= this.store.data.items;
       var _data = '';
       Ext.each(_res,function(_item,_index,_allItems){
			if(_item.get("name").length>0){
				if(_data.length==0){
					_data+='[';
				}
				if(_data.length>1)
					_data+=',';
				_data+= Ext.encode(_item.data);
				//_count++;
			}
		});
       	if(_data.length>0)
			_data+=']';
		else{
			warningMesg({
				msg : '请录入人员信息！'
			});
			return;
		}
       ajaxRequest( {
					url : 'xmgk/xm-member-manage!save.action',
					params : {
    	   				proId:guId,
						data : _data
					},
					callBack : function(returnData) {
					//	_grid.store.remove(_selRow);
					}
				});
		
	},
	onDelRow : function(){
		var _selRow = this.getSelectionModel().selected.items[0];
		var _grid = this;
		if(_selRow==null){
			warningMesg({msg : '请选择人员！'});
			return ;
		}
		askMesg({
			msg : '确定删除该人员信息?',
			fn : function(){
			if(_selRow.get('guId')>0){
				ajaxRequest( {
					url : 'xmgk/xm-member-manage!delete.action',
					params : {
						guId : _selRow.get('guId')
					},
					callBack : function(returnData) {
						_grid.store.remove(_selRow);
					}
				});
			}else
				_grid.store.remove(_selRow);
			}
		});
	}
});