Extjs grid和form之间的传值

我们希望在单击左侧的Grid时同步更新右边Form中的数据。如果用户单击Grid中的某一行，就会把这行对应的相应信息放到Form中显示，于是我们就能对这条信息进行修改和删除操作了。为此，我们要给Grid添加一个事件监听函数，专门处理鼠标点击事件，如下面的代码所示。

一:

　　// 单击修改信息开始

　　grid.on('rowclick', function(grid, rowIndex, event) {

　　var record = grid.getStore().getAt(rowIndex);

　　form.getForm().loadRecord(record);

　　form.buttons[0].setText('修改');

　　});

二:

	 var chbox=new Ext.grid.CheckboxSelectionModel({
	 	listeners:{
	 		rowselect: function(sm, row, rec) {
//                   Ext.getCmp("sform").getForm().loadRecord(rec);
                   form.getForm().loadRecord(rec);
//	 			alert(rec.get('deptno'));
                        }
	 	}
	 });
	 
/*	 grid.on('rowclick',function(grid,rowIndex,event){
	 		var record = grid.getStore().getAt(rowIndex);
				form.getForm().loadRecord(record);
	 	});*/

　　这里监听的事件名为rowclick，它对应Ext.grid.RowSelectionModel的监听事件，每当用户选中Grid中的一行时，就会触发该事件。事件被触发的同时还会执行我们设置的监听函数。

　　监听函数预设了3个参数：第一个参数grid表示哪个Grid被点击了;第二个参数rowIndex表示选中了哪一行;event是EXT内部通用的事件对象，我们在这里没有用到。

　　在监听函数执行时，首先通过grid.getStore().getAt(rowIndex);获得被选中的这一行对应的record。这个record是保存在store中的数据，Grid上没有显示出来的id也包含在其中。对应的所有学生信息都可以从这个record中获得，但并不需要从record中把学生信息逐一取出来，然后再逐一放到Form中去。Form提供的loadRecord()函数可以一次性将record中的数据赋予Form中的输入组件，只要保证输入组件的name或hiddenName与record中定义的属性一致即可。

　　在使用loadRecord()将Grid中选择的数据复制到Form中以后，我们再调用form. buttons[0].setText('修改'); 将Form中的第一个按钮的文字设置为“修改”。这样用户就知道现在提交Form执行的是对某一条学生信息进行修改的操作。如果要继续添加新的学生信息，可以单击“清空”按钮，它会将刚刚从Grid中复制的信息都清除掉，包括id隐藏域中的数据，还会把第一个按钮上的“修改”设置为“添加”。再次输入数据并单击“提交”按钮，这时执行的就是“添加”操作了。