ext中EditorGridPanel删除及添加及编辑(modified问题是bug吗)

 

//column model
		var eidtorGridColumnModel = new Ext.grid.ColumnModel([
			{
				header:'编号',dataIndex:'id',editor : new Ext.grid.GridEditor(new Ext.form.NumberField({
					allowBlank: false
				}))
			},
			{header:'姓名',dataIndex:'name',editor : new Ext.grid.GridEditor(new Ext.form.TextField({
					allowBlank: false
				}))
			},
			{
				header:'描述',dataIndex:'desc',editor : new Ext.grid.GridEditor(new Ext.form.TextField({
					allowBlank: false
				}))
			}
		]);
		/**
		 * 本想直接new 一个Record，一看API发现这句话
		 * Record (  [ Object data ],  [ Object id ] ) 
		 * 此构造函数不应该用来创建Record对象。 作为替代，使用create 创建一个Ext.data.Record的子类
		 */
		var MyRecord = Ext.data.Record.create([
			{name:'id',type:'Number'},
			{name:'name',type:'String'},
			{name:'name',type:'String'}
		]);
		
		var editorGridStore = new Ext.data.JsonStore(
					{
						fields : [
							'id','name','desc'
						],
						data : data2
					}
				);
		
		//new一个可编辑的表格
		var editorGrid = new Ext.grid.EditorGridPanel(
			{
				id:'eg',
				renderTo: 'editorGrid',
				cm : eidtorGridColumnModel,
				autoHeight:true,
				store : editorGridStore,//这里如果在内部new JsonStore的话，在事件中就无法引用到这个store了
				tbar : new Ext.Toolbar(
					[
						'-',
						{
							text:'添加',
							handler : function(){
								var newRow = new MyRecord(
									{
										id:'',
										name:'',
										desc:''
									}
								);
								editorGrid.stopEditing();
								editorGridStore.insert(0,newRow),
								editorGrid.startEditing(0,0);
							}
						},
						'-',
						{
							text:'删除',
							handler:function(){
								var sm = editorGrid.getSelectionModel();
								/**
								 * AbstractSelectionModel类有两个子类CellSelectionModel, RowSelectionModel-->CheckboxSelectionModel
								 * 对于EditorGridPanel获取的应该是CellSelectionModel的对象，那么就可以调用它的
								 * getSelectedCell()来获取选中的格子的数组的位置
								 */
								var cell = sm.getSelectedCell();//这个是获取选中的格子在数组中的位置，如：[0,1],以数组的形式表示
								var record = editorGridStore.getAt(cell[0]);//这里是选择了store中的第cell所在的行的record
								/**
								 * 这个record相当于store中的一条数据,store内有一个名为data的MixCollection,它用来存放reader解析来的数据,
								 * 因此可以用它来得到具体某一行的数据，如store.getAt(0)会得到第一行的record,record.get('name')可以得到相应
								 * 名称的值,而对store进行添加或者删除操作都会反映到html界面中来
								 */
								editorGridStore.remove(record);
							}
						},
						'-',
						{
							text:'保存',
							handler : function(){
								/**
								 * 对于做了修改的行，store.modified这个数组里记录下了修改行的信息
								 * record.json记录了原始数据,如果当前Record是通过 ArrayReader 或者一个JsonReader 创建时才存在
								 * record.data记录了修改后的数据
								 * record.fields存放的是列的信息(用MixCollection存的)，可以取到列信息
								 * 
								 * 发现个问题（不知道是我还没有深入学习还是因为是个BUG）:
								 * 一旦你修改了某个格子里面的数据，modified这个数组里面就会添加一条record,
								 * 如第一行数据为:1,sky,human
								 * 现在改成:2,sky,humn
								 * modified里抽对应的record为:json-->1,sky,human    data-->2,sky,human
								 * 我这个时候将2重新变为1，照理说这个时候modified应该清空,而ext却没做任何处理，
								 * modifed里面json与data都成了1,sky,human,这个时候如果进行保存操作的话会出现什么问题？
								 */
								var record = editorGrid.getStore().modified[0];
								alert(record.get('name'));
							}
						}
					]
				)
			}
		);

store进行操作时会触发相应的事件，我猜测在事件中会对调用这个store的组件进行重绘