extjs中form与grid交互数据(record)的方法


Posted in Javascript onAugust 29, 2013

首先在grid的tbar中定义编辑按钮:
Js代码

id:'editDataButton', 
text:'编辑', 
tooltip:'编辑', 
iconCls:'edit', 
handler: function(){ showeditPanel();}

再定义form:

Js代码

var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});

然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window):

Js代码

//--编辑按钮调用的函数(弹出编辑窗体) 
function showeditPanel() 
{ //直接取得选中的行对应的record 
var record = grid.getSelectionModel().getSelected() 
if(!record){ 
Ext.Msg.alert('信息','请选择要编辑的数据'); 
return; 
} 
//--定义编辑窗体 
if(!xjjlEditWindow) 
{ 
xjjlEditWindow = new Ext.Window({ 
el: 'edit_win', //前端放置当前js文件的页面中的div名称 
title:'编辑记录', 
width: 650, 
height: 360, 
closable: false, 
closeAction: 'hide', 
resizable: false, 
items: xjjlEditForm //在window中加载编辑的form 
}); 
} 
xjjlEditWindow.show(Ext.get('editDataButton'));//显示编辑窗口 
//[注意]先xjjlEditWindow.show(); 再 xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一次点击[编辑]按钮时无法加载数据到form的问题了。 
xjjlEditForm.getForm().loadRecord(record); 
//关键是这里用当前选中的grid中的record填充form 
}

这样就可以在新窗口中对选中的数据进行编辑了;
Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
js中substring和substr的定义和用法
May 05 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 #Javascript
js中substring和substr的详细介绍与用法
Aug 29 #Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 #Javascript
JavaScript自定义事件介绍
Aug 29 #Javascript
JavaScript包装对象使用介绍
Aug 29 #Javascript
JavaScript作用域链使用介绍
Aug 29 #Javascript
JavaScript 命名空间 使用介绍
Aug 29 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
js function使用心得
2010/05/10 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
对python 操作solr索引数据的实例详解
2018/12/07 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python 如何快速复制序列
2020/09/07 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
找工作求职信
2014/07/07 职场文书
保险专业求职信
2014/07/07 职场文书
地方白酒代理协议书
2014/10/25 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
心理健康教育主题班会
2015/08/13 职场文书
创业计划书之外语培训班
2019/11/02 职场文书