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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 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
模仿OSO的论坛(四)
2006/10/09 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php反射应用示例
2014/02/25 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
职工运动会邀请函
2014/01/19 职场文书
给全校老师的建议书
2014/03/13 职场文书
交通文明倡议书
2014/05/16 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
售后客服工作职责
2014/06/16 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android