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设置FieldSet展开与收缩
May 15 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
js 调用百度分享功能
Feb 27 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
js实现弹窗效果
Aug 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
E路文章系统PHP
2006/12/11 PHP
php防注
2007/01/15 PHP
PHP读取MySQL数据代码
2008/06/05 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python3进制之间的转换代码实例
2019/08/24 Python
运动会获奖感言
2014/02/11 职场文书
小学教学随笔感言
2014/02/26 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
债务纠纷起诉书
2015/05/20 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
mysql数据库实现设置字段长度
2022/06/10 MySQL