你好,游客 登录 注册 搜索
背景:
阅读新闻

ExtJS4加载FormPanel数据的几种方式

[日期:2016-11-11] 来源:Linux社区  作者:hetaojs [字体: ]

我们做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} 
}); 

本文永久更新链接地址http://www.linuxidc.com/Linux/2016-11/137004.htm

linux
相关资讯       ExtJS4 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款