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 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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
缅甸的咖啡简史
2021/03/04 咖啡文化
一个简单的域名注册情况查询程序
2006/10/09 PHP
php开发文档 会员收费1期
2012/08/14 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js实现日历与定时器
2017/02/22 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python高斯消除矩阵
2019/01/02 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python中自带的三个装饰器的实现
2019/11/08 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
2014离婚协议书范文
2014/09/10 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL