ExtJS4加载FormPanel数据的几种办法

发布时间：2021-11-18 14:11:33 所属栏目：教程来源：互联网

导读：我们做web应用最多的就是处理表单，extjs为我们提供了很多处理表单的功能，很多初学者疑惑怎么加载表单数据，到底能用什么方式加载？本文中，我将我自己实验过的进行一下总结，自己备忘，也希望能帮助到其他人。 1.使用loadRecord加载Model数据。这也是我目

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

采用gpt分区无法安装系	跟你说进程管理器快捷
电脑装机必备清单	小编教你联想笔记本进