ExtJS4加載FormPanel數據的幾種方式

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