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类和继承 constructor属性
Mar 04 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
Vue引入Stylus知识点总结
Jan 16 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设计模式之迭代器模式
2016/06/17 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Python 时间处理datetime实例
2008/09/06 Python
centos系统升级python 2.7.3
2014/07/03 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python把转列表为集合的方法
2019/06/28 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python创建临时文件和文件夹
2020/08/05 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
2014学雷锋活动总结
2014/03/09 职场文书
个人贷款担保书
2014/04/01 职场文书
教师群众路线心得体会
2014/11/04 职场文书
先进集体申报材料
2014/12/25 职场文书
佛光寺导游词
2015/02/10 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
运动会200米广播稿
2015/08/19 职场文书
化工厂员工工作总结
2015/10/15 职场文书