我们希望在单击左侧的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隐藏域中的数据,还会把第一个按钮上的“修改”设置为“添加”。再次输入数据并单击“提交”按钮,这时执行的就是“添加”操作了。
分享到:
相关推荐
extjs4 grid 包括form js代码
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
NULL 博文链接:https://chinadeng.iteye.com/blog/799381
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
ExtJs 4.0 Grid 单元格合并控件封装
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
Extjs动态Grid的生成 htm
EXTJS Grid布局总结例子,含源代码。
主要介绍了ExtJs异步无法向外传值和赋值的完美解决办法,需要的朋友可以参考下
Extjs Grid 操作大全,获取各种值和添加各种点击事件