`
dayone
  • 浏览: 366238 次
  • 性别: Icon_minigender_1
  • 来自: xian
社区版块
存档分类
最新评论

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

阅读更多

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

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

分享到:
评论
2 楼 lunvsxiao 2010-07-31  
不错哦,谢了
1 楼 xue19850525 2009-01-09  
谢了!!!!!!!!!!!!!!

相关推荐

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

    首先在grid的tbar中定义编辑按钮:Js代码 代码如下:id:’editDataButton’, text:’编辑’, tooltip:’编辑’, iconCls:’edit’, handler: function(){ showeditPanel();} 再定义form: Js代码 代码如下:var ...

    ExtJs、ASP.net运用Linq to SQL与SQL储存过程交互.

    ### ExtJs、ASP.net运用Linq ...综上所述,本文档详细介绍了如何在ExtJs与ASP.net相结合的应用中,利用Linq to SQL与SQL存储过程进行高效的数据交互。通过对以上知识点的理解和实践,可以大大提高开发效率和应用性能。

    Extjs 项目Demo

    2. **增、删、改操作**:在ExtJS中,增、删、改操作一般通过Form Panel(表单面板)和Record(数据记录)实现。Form Panel提供了丰富的表单元素和验证机制,用户可以输入、编辑数据。当用户提交表单时,这些数据会被...

    Extjs3.0中文文档大全

    2. **组件库**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表单(Form)、网格(Grid)、树形视图(Tree)和菜单(Menu)。每个组件都有详细的API参考,包括属性、方法、事件和配置项。 3. **数据管理**:...

    extJs 简单的增删改查

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端...实际开发中,还需要考虑数据的远程加载(Ajax请求)、错误处理、用户交互优化等问题。通过深入学习ExtJS的API和文档,你可以构建出更加复杂和高效的Web应用。

    ExtJs的增删改查功能

    ExtJs 提供了多种组件用于实现增删改查的交互,如`Ext.form.Panel`用于创建表单,`Ext.grid.Panel`用于显示和编辑表格数据,以及`Ext.toolbar.Toolbar`用于添加操作按钮如“新增”、“编辑”、“删除”。...

    extjs3连接mysql数据库实现增删查改功能

    在ExtJS 3中,使用`Ext.data.Record`来定义数据模型。定义字段名和类型,这将映射到数据库的列。例如,如果你有一个名为`users`的表,你可能需要定义如下模型: ```javascript var User = new Ext.data.Record....

    ExtJs常用到的增,删,改,查操作

    - 在ExtJs中创建新记录通常涉及创建一个新的表单(`Ext.form.Panel`),包含用于输入数据的字段(`Ext.form.Field`的子类,如`Ext.form.TextField`)。 - 当用户填写完信息后,通过监听表单的提交事件,将数据发送...

    Extjs学习开发API

    在ExtJS 2.2中,开发者可以利用其丰富的UI组件,如表格(Grid)、树形结构(Tree)、表单(Form)、面板(Panel)等,来构建复杂的Web应用。API文档通常会涵盖以下几个主要部分: 1. **基础概念**:讲解ExtJS的核心...

    Ext GridPanel 中实现加链接操作

    Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...

    extjs学习资源

    - **数据管理**: `Ext.data`是Extjs中用于处理数据的核心模块。 - **连接**: `Ext.data.Connection`和`Ext.data.Ajax`用于发起HTTP请求获取数据。 - **记录模型**: `Ext.data.Record`定义了数据模型的结构。 - **...

    Ext增删改查

    在“Ext增删改查”这个主题中,我们将深入探讨如何使用ExtJS进行数据操作,包括添加(Add)、删除(Delete)、修改(Update)和查询(Query)数据。 1. **Ext.data.Model**: 这是ExtJS中的核心类,代表了数据模型。...

    extjs 项目整理

    - **CreateRecord**: 创建记录,用于向数据存储添加新记录。 - **UpdateRecord**: 更新记录,修改现有数据存储中的记录。 - **GetSelectedRecord**: 获取选中记录,获取当前选中的数据记录。 - **GetForm**: ...

    Ext表格中增删改查实例

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一套完整的组件...记得在实际项目中,还需要考虑错误处理、数据验证以及与服务器的交互等方面,以确保应用的健壮性和用户体验。

Global site tag (gtag.js) - Google Analytics