我们做web应用最多的就是处理表单,extjs为我们提供了很多处理表单的功能,很多初学者疑惑怎么加载表单数据,到底能用什么方式加载?本文中,我将我自己实验过的进行一下总结,自己备忘,也希望能帮助到其他人。
1.使用loadRecord加载Model数据。这也是我目前用的较多的。
 比如有个角色管理,定义如下model“:

Ext.define('roleModel', {  
    extend: 'Ext.data.Model',  
    fields: [  
        { name: 'id', mapping: "id" },      
        { name: 'roleName', mapping: "roleName" },  
        { name: 'status', mapping: "status" },  
        { name: 'remark', mapping: "remark" }  
    ],  
    idProperty: 'id'  
});  

定义一个表单如下:

var formId = "roleEditForm";  
var formPanel = Ext.create("Ext.form.Panel",{  
                    id: formId,  
                    height: 270,  
                    bodyStyle: "padding-top:20px;",  
                    url: "role/save.action",  
                    method: 'POST',  
                    defaults:  
                        {  
                        width: 200,  
                        labelStyle: "padding-left:20px;",  
                            border: false  
                        },  
  
                    items: [  
                        {  
                            name: 'roleName',  
                            fieldLabel: '角色名称',  
                            xtype: "textfield",  
                            maxLength:40  
                        }  
                        ,  
                        {  
   
                            name: 'remark',  
                            fieldLabel: '备注',  
                            xtype: "textfield",  
                            width:300,  
                            maxLength:200  
                        }  
                        ,  
                          
                        {  
                            name: 'id',  
                            xtype: "hidden",  
                            value:id  
                        }  
                          
                         ,  
                        {  
                            name: 'method',  
                            xtype: "hidden",  
                            value:id==0?"save":"update"  
                        }  
                    ]  
                })  

那么我加载数据的时候使用loadRecord方式:

var form = Ext.getCmp(formId);  
                var id=1;//角色的id  
                Ext.ModelMgr.getModel('roleModel').load( id,{  
                    url:"role/getinfo.action",  
                    success: function(obj) {  
                        form.loadRecord(obj);  
                    }  
                });  

2.第二种是给formpanel增加reader的方式。
 在第一种方法中不需要reader,只是把record中的字段与表单中字段的name对应起来,就可以加载数据了。reader方式则需要生成一个reader对象,利用reader去匹配字段,达到填充数据的目的

form不说了,首先定义reader:

var roleReader = Ext.create('Ext.data.reader.Json', {  
  
        root : 'data',//数据的根属性,如果只是纯数据对象,没有什么root,那写""(空串)或者空着就行  
        model :'roleModel'//使用的model  
});  

定义一个reader,reader中指定了要使用的model。然后表单中指定该reader:

reader: roleReader ,  
formPanel.load({  
url: 'role/getinfo.action',  
params: {'id':roleid}  
});  

ExtJS4加载FormPanel数据的几种方式的更多相关文章

  1. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  2. iOS --- UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档  html/htm  pdf   docx  txt等格式的文件.  safari浏览器就是通过UIWebView做的. 服务器将MIM ...

  3. ArcGIS客户端API中加载大量数据的几种解决办法

    ArcGIS客户端API中加载大量数据的几种解决办法 2011-03-25 18:17 REST风格的一切事物方兴未艾,ArcGIS Server的客户端API(Javascript/Flex/Sil ...

  4. 加载xib文件的两种方式

    一.加载xib文件的两种方式 1.方法一(NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@&quo ...

  5. Hadoop生态圈-注册并加载协处理器(coprocessor)的三种方式

    Hadoop生态圈-注册并加载协处理器(coprocessor)的三种方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 到目前为止,大家已经掌握了如何使用过滤器来减少服务器端通过 ...

  6. Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式: a.  加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...

  7. 转 Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式   velocitypropertiespath Velocity中加载vm文件的三种方式:    方式一:加载classpath目录下的vm文件 Prope ...

  8. Spring加载properties文件的两种方式

    在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可, ...

  9. 前端性能优化(四)——网页加载更快的N种方式

    网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户.除此之外,前端优化得好,还可以为企业节约成本.那么我们应该如何对我们前端的页面进行性能优化呢? ...

随机推荐

  1. 使用Mou 编写Markdown编辑器博客

    Mou Overview Mou, the missing Markdown editor for web developers. Syntax Strong and Emphasize strong ...

  2. Android_GestureDetector

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  3. 如何在C#中循环一个枚举

      在C#中要想迭代循环一个枚举,最容易想到的办法是直接进行循环,如下代码所示:   public enum Suit { Spades, Hearts, Clubs, Diamonds } publ ...

  4. matrix computing optimization schemes

    * stackoverflow: how does BLAS get such extern performance * Howto optimizate GEMM http://wiki.cs.ut ...

  5. map 树木品种

    树木品种 TimeLimit: 1 Second   MemoryLimit: 32 Megabyte Totalsubmit: 517   Accepted: 120 Description 硬木是 ...

  6. 【Slickflow学习】.NET开源工作流项目转换(二)

    第一次自己写博客文章,大家多多指教.写博客主要记录一下学习的过程,给初学者提供下参考,也留给自己做备忘. Slickflow .NET开源工作流-项目转换 上一篇文章里说了1.2版本的下载,下载解压后 ...

  7. 关于async和await的一些误区实例详解

    转载自 http://www.jb51.net/article/53399.htm 这篇文章主要介绍了关于async和await的一些误区实例详解,有助于更加深入的理解C#程序设计,需要的朋友可以参考 ...

  8. Cordova+angularjs+ionic+vs2015开发(一)

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...

  9. MFC多视图共用一文档实现

    项目过程中有定制视图的需求,具体为打开程序默认双视图并且共用一个文档.在网上找了许多类似的资料,都不尽完善.本文直接从达到目的的角度叙述,实现原理不再多说. 1.在自己的App类中定义public变量 ...

  10. 第六篇、CSS属性

    <!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...