- 浏览: 58960 次
文章分类
最新评论
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,其中第二个参数为从load或submit 方法传递过来的Ext.form.Action对象的配置数据(Config Options)。其中的success和failure属性是用于处理请求成功或失败的函数。但需要注意的是,文档中的说明是这个success或 failure取决于Http请求过程是否出错。实际情况却并非这样,我在开发过程中发现HTTP响应代码一直都是200,但被调用的函数却一直都是 failure属性对应的函数。通过查看Action.js可以发现响应过来的数据是需要符合一定格式的,Ext.form.Action.Load的 API文档开头就说明了响应数据包必须类似下面的格式:
{ success: true, data: { clientName: "Fred. Olsen Lines", portOfLoading: "FXT", portOfDischarge: "OSL" } }
这个说明在我使用ExtJS的时候再次误导了我。我认为只需要响应的数据为类似的格式就可以了。结果仍然出错,查看Action.js中的 handleResponse方法可以看出,返回的数据为上面代码的格式,但并不是说从服务端发送过来的数据就是这样的格式,而是需要将 Ext.form.Action.Load的result属性设置成上面的格式的数据。从handleResponse也可以看出,Action.js使用了form.reader属性来处理服务端数据。这个属性也可以在初始化FormPanel的时候传递给FormPanel,FormPanel将会把这个属性传递给它内置的BasicForm对象。怎样使用JsonReader来使提取响应数据来使它满足PanelForm的要求呢?再看 handleResponse中的代码,在reader存在的情况下,它返回的是所需要的格式的数据,一个包含success属性和data属性的对象,而data属性来自于JsonReader的read方法处理后的结果。再查看JsonReader.js中的read方法,它调用的是 readRecords来读取数据,而返回的值是由reader的root属性决定的,从JsonReader.js中还可以看出,root属性对应的 JSON对象必须是集合类型的,因此我们在后台发送过来的数据必须也是集合类型,我在这里也出了错。一直认为加载数据到Form里,一次只加载一条,所以从服务端传递过来的数据都是单个的对象,而将JsonReader对象的root设置为单个对象的名称,结果Form中一直都加载不上数据。后来将服务端传递过来的数据修改为集合数型问题解决了。
小结:
- ExtJS中JsonReader对于数据的处理总是一致的,不管你需要的是单条记录还是多条记录,它总是通过total属性判断记录数,通过root属性对应的名称来取记录集合。
- FormPanel中处理数据的为内置的BasicForm类型的对象,它通过load和submit方法来加载或提交数据。而这两个方法是通过 Ext.form.Action的两个子类Ext.form.Action.Load、Ext.form.Action.Submit来提交请求和调用用户的success和failure方法。决定调用success和failure的并非Http请求是否出错,而是决定于Action.js中 handleResponse的处理结果。我们可以通过设置FormPanel的reader配置对象来干预handleResponse对数据的处理。而这个reader也可设置响应数据与FormPanel中字段的对应关系。
- 多看源码,可以获取更多。
附:
表格中双击进行编辑的JS源码,这个代码比官方文档中的处理方式简单一些,觉得官方文档中的edit中加载数据的处理是一种hack的方式,并不太适合实际应用。
ExtJS网站上的CRUD的文章,其中包含有加载数据进行编辑的例子
Ext.onReady(function(){ var newFormWin; var form1; //表格处理 //Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; Ext.QuickTips.init(); var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //行号列 sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:function(value){ if(value=='1'){ return "男"; }else{ return "女"; } }}, //增加性别,自定义renderer,即显示的样式,可以加html代码,来显示图片等。 {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'memo'} ]); var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:ACTION_URL}),//调用的动作 reader: new Ext.data.JsonReader({ totalProperty: 'total', root: 'list', successProperty :'success' }, [{name: 'id',mapping:'id',type:'string'}, {name: 'sex',mapping:'sex',type:'string'}, {name: 'name',mapping:'name',type:'string'}, {name: 'memo',mapping:'memo',type:'string'} //列的映射 ]) }); var grid = new Ext.grid.GridPanel({ id: 'grid', el: 'center', region:'center', title:'用户', ds: ds, sm: sm, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) //页脚显示分页 }); //布局处理 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); new Ext.Viewport({ layout:'border', items:[ { xtype:'box', region:'north', el: 'north', height:32, title:'north' },{ region:'south', contentEl: 'south', split:true, height: 100, minSize: 100, maxSize: 200, collapsible: true, title:'South', margins:'0 0 0 0' }, grid ] }); //el:指定html元素用于显示grid grid.render();//Ext.getCmp('grid').render();//渲染表格 ds.load({params:{start:0, limit:10}}); //加载数据 grid.on("rowdblclick", function(grid) { loadFormData(grid); //alert(form1.reader); }); // 载入被选择的数据行的表单数据 var loadFormData = function(grid) { var _record = grid.getSelectionModel().getSelected(); if (!_record) { Ext.example.msg('修改操作', '请选择要修改的一项!'); } else { myFormWin(); form1.form.load( { url : EDIT_ACTION_URL+'?sid='+ _record.get('id'), waitMsg : '正在载入数据...', success : function(form,action) { Ext.example.msg('编辑', '载入成功!'); }, failure : function(form,action) { Ext.example.msg('编辑', '载入失败'); } }); } }; var myFormWin = function() { // create the window on the first click and reuse on subsequent // clicks if (!newFormWin) { newFormWin = new Ext.Window( { el : 'topic-win', layout : 'fit', width : 400, height : 300, closeAction : 'hide', plain : true, title : '窗口', items : form1 }); } newFormWin.show('New1'); }; form1 = new Ext.FormPanel( { // collapsible : true,// 是否可以展开 labelWidth : 75, // label settings here cascade unless overridden url : 'AddLevel.action', frame : true, title : '修改', bodyStyle : 'padding:5px 5px 0', width : 350, waitMsgTarget : true, //这个属性决定了load和submit中对数据的处理,list必须是一个集合类型,json格式应该是[]包含的一个数组 reader: new Ext.data.JsonReader({root:'list'}, [{name: 'id',mapping:'id',type:'string'}, {name: 'sex',mapping:'sex',type:'string'}, {name: 'memo',mapping:'memo',type:'string'} ]), defaults : { width : 230 }, defaultType : 'textfield', items : [ { fieldLabel : '编号', name : 'id', allowBlank : false }, { fieldLabel : '性别', name : 'sex', allowBlank : false }, new Ext.form.TextArea( { fieldLabel : '备注', name : 'memo', growMin : 234 })], buttons : [ { text : '保存', disabled : false, handler : function() { if (form1.form.isValid()) { form1.form.submit( { url : 'AddLevel.action', success : function(from, action) { Ext.example.msg('保存成功', '添加级别成功!'); ds.load( { params : { start : 0, limit : 30, forumId : 4 } }); }, failure : function(form, action) { Ext.example.msg('保存失败', '添加级别失败!'); }, waitMsg : '正在保存数据,稍后...' }); dialog.hide(); } else { Ext.Msg.alert('信息', '请填写完成再提交!'); } } }, { text : '取消', handler : function() { newFormWin.hide(); } }] }); });
<script type="text/javascript"></script>
发表评论
-
一个页面的倒计时代码
2011-12-14 12:59 1061js: $(function(){ //====倒计 ... -
Ext.ux.ImageButton的使用(带有图片的按钮)
2011-12-06 18:50 4782调用方法: var myImageButton=new Ex ... -
Ext.grid.GridPanel
2011-11-25 17:08 21831、Ext.grid.GridPanel 主要配置项: sto ... -
ExtJS FormPanel提交数据给struts action ,handler与listener的区别
2011-11-25 16:54 3316ExtJS FormPanel提交数据给struts acti ... -
struts2从后台传数据extjs的grid中
2011-11-24 16:10 3764使用JSON,在SERVLET或者STRUTS的ACTION中 ... -
ExtJs的resultGrids中动态添加按钮
2011-11-17 17:07 2896var resultGrids = Ext.getCmp(&q ... -
jquery的一些知识点
2011-11-14 12:45 1427ExtJs2.0学习系列(1)--Ext.Me ... -
刷卡登录的
2011-11-07 14:11 714刷卡登录的 -
js得到url地址里面的参数
2011-11-07 13:54 846<?xml version="1.0" ...
相关推荐
根据提供的文件信息,我们可以深入探讨如何在ExtJS中利用FormPanel进行数据加载和提交的核心概念与实践技巧。 ### FormPanel的Form对象 在ExtJS框架中,`FormPanel`是处理表单数据的一个核心组件。当我们在使用`...
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
在Extjs4中,可以使用`form.load()`方法将JSON数据加载到FormPanel中。这个方法接收一个配置对象作为参数,该对象通常包括URL、请求类型(GET或POST)、成功回调函数和失败回调函数等属性。当后端服务器返回JSON数据...
在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...
在ExtJS中,我们可以通过继承FormPanel和Store类,然后重写或添加方法来实现自我扩展。例如,我们可能想要增加自定义验证规则,优化数据加载逻辑,或者添加特定的事件处理。 实现自我扩展FormPanel时,我们可以创建...
用户可以通过EXTJS的FormPanel进行预订操作,提交表单数据到ASP.NET的服务器端方法,处理预订逻辑并返回响应。 EXTJS还支持Ajax通信,这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...
在这个项目中,我们看到的是使用ExtJS实现的一个动态加载、增删改查和拖拽功能的树形控件(Tree),并与后端Java服务和MySQL数据库进行交互。这个项目适合那些希望学习如何在Web应用中集成高级UI特性的开发者。 ...
为了提高用户体验,可以采用异步加载和分页策略,只加载用户有权限查看的数据,减少不必要的网络传输。 通过上述步骤,我们能够利用ExtJS的前端能力和SSH的后端强大功能,构建出一套完整的登录验证和权限拦截系统...
4. **Store和Model**:Store是数据存储的抽象,负责加载和管理数据,Model定义了数据结构和行为,两者共同构成了数据层。 5. **GridPanel**:ExtJS的表格组件,可展示大量数据,并提供排序、分页、编辑等功能,是...
Proxy会根据配置的URL和参数发送请求,服务器返回数据后,Store将数据加载到内存中。 3. 更新(Update):当用户修改记录时,Store会检测到数据变化并标记为脏(dirty)。调用Store的sync方法,会将所有脏记录通过...
在ExtJs中,可以通过FormPanel组件轻松实现表单的构建及提交。为了确保数据的安全性以及提升性能,通常推荐将表单数据通过Ajax方式提交给服务器端进行处理。具体实现方法如下: 1. **创建FormPanel**:在前端使用...
Store支持远程数据加载,可以与服务器通过Ajax进行通信,实现分页、排序、过滤等功能。 **4. GridPanel** GridPanel是ExtJS中的一个核心组件,用于展示表格数据。它提供了行编辑、列重排、筛选等多种功能,并且可以...
在C#开发环境中,ExtJS 可以作为前端技术与后端的C#服务进行交互,实现数据的动态加载和展示。 在“C# Extjs 登陆框、框架”这个主题中,我们主要关注的是如何使用ExtJS创建一个登录界面,并结合C#后端实现用户验证...
7. **最佳实践**:动态操作FormPanel时,应遵循最佳实践,如延迟加载未使用的字段以减少初始加载时间,使用合适的布局管理器优化空间利用,以及确保数据验证和提交逻辑的健壮性。 总结起来,这篇博客内容涵盖了...
4. **模型(Model)和数据存储(Data Store)**:在ExtJS中,Model定义了数据结构和业务逻辑,而Data Store负责管理数据,包括加载、刷新、排序和过滤。服务器端需要提供相应的数据服务来配合Store的请求。 5. **分页和...
ExtJS4的Store组件可以方便地处理这种数据加载和提交,它与Model类一起,定义了数据字段和行为,使数据操作更加规范和易于管理。 在"Ext4_SMS"这个压缩包中,可能包含了以下文件和目录: 1. `app.js`: 应用主入口...
一旦数据加载到Store,就会自动填充到网格中,用户可以浏览和筛选信息。 更新(Update)操作涉及修改现有的数据记录。在数据网格中,用户可以直接编辑单元格内容,更改会被自动检测并暂存到本地。当用户确认更改时...