网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2026/1/3 浏览:3 次 )

首先在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
}

这样就可以在新窗口中对选中的数据进行编辑了;

上一篇:js禁止页面复制功能禁用页面右键菜单示例代码
下一篇:JS中图片缓冲loading技术的实例代码
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap