首先在grid的tbar中定义编辑按钮:
id:'editDataButton',
text:'编辑',
tooltip:'编辑',
iconCls:'edit',
handler: function(){ showeditPanel();}
再定义form:
var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});
然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window):
//--编辑按钮调用的函数(弹出编辑窗体)
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
}
这样就可以在新窗口中对选中的数据进行编辑了;
分享到:
相关推荐
介绍了extjs中form与grid交互数据(record)的方法,有需要的朋友可以参考一下
extjs4 grid 包括form js代码
extjs和数据库的后天交互,好好的学习中,。。。。。。。
ext精髓,Extjs如何与数据库交互,可以很快的叫你EXT一些知识
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
extjs-form组件配置参数详解 extjs各种组件说明
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Extjs4 表单从数据库读取数据映射到对应的字段中显示
ssh+extjs4.0grid删除数据实例,包没有了大家把包下载下来! 我的资源中有extjs的依赖包!
php+extjs+grid实时显示更新数据
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
EXTJS中grid控件数据导出excel示例。很好理解。
Extjs动态Grid的生成 htm
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
简单入门ext要自己去官网下载ext4.21版本,导入到服务路径即可
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs4前台前台grid导出excel
NULL 博文链接:https://missing1984.iteye.com/blog/355554