extjs表单直接获取gird一行的数据

来源：互联网发布：matlab求解优化问题编辑：程序博客网时间：2024/05/22 03:52

微信小程序实战项目——点餐系统程序员11月书讯，评论得书啦 Get IT技能知识库，50个领域一键直达

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

标签： functionajaxext

2012-07-25 14:27 790人阅读评论(0)收藏举报

本文章已收录于：

分类：

ExtJs（7）

作者同类文章X

　　在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之间的数据交互等知识。

顶: 0

踩: 0

我的同类文章

ExtJs（7）

http://blog.csdn.net

•ViewPort2012-07-30阅读681
•Ext.Toolbar中元素居中2012-07-29阅读1095
•ExtJs3.4简介2012-07-22阅读1130
•使用PL/SQL Developer远程连接到oracle 11g2012-04-14阅读2007

•Extjs combox实现autocompelte效果2012-07-29阅读1370
•ext window事件2012-07-29阅读1179
•Eclipse和MyEclipse安装JQuery插件2012-06-05阅读687

参考知识库

猜你在找: 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统实战教程; 分布式资源管理系统的前世今生，深入剖析YARN资源调度架构; Struts实战-使用SSH框架技术开发学籍管理系统; 微信公众号开发7-用户管理-微信开发php; Ajax程序开发经典实例视频教程; Linux下C语言编程; Linux下C语言编程; extjs新宠儿; Linux下C语言编程; Linux下C语言编程

查看评论

暂无评论

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

0 0

extjs表单直接获取gird一行的数据

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

我的同类文章

参考知识库

核心技术类目