在Grid和Form之间进行数据交互

　　在Grid和Form之间进行数据交互

　　我们在上面已经实现了在Grid中显示学生信息列表，也实现了使用Form对学生信息执行添加、修改和删除等操作。但是，Grid和Form之间的数据还无法交互使用。

　　一个尚未解决的问题是，如何在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('修改');

　　});

　　// 单击修改信息结束

　　这里监听的事件名为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隐藏域中的数据，还会把第一个按钮上的“修改”设置为“添加”。再次输入数据并单击“提交”按钮，这时执行的就是“添加”操作了。

　　到此为止，我们用前面学过的知识实现了一个完整的学生信息管理系统。其中涉及BorderLayout的布局应用、Grid的分页显示和数据排序、Form的提交和清空、利用Ajax与后台进行数据交互、通过事件监听实现Grid与Form之间的数据交互等知识。