zoukankan      html  css  js  c++  java
  • 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:  
                            {  
                             200,  
                            labelStyle: "padding-left:20px;",  
                                border: false  
                            },  
      
                        items: [  
                            {  
                                name: 'roleName',  
                                fieldLabel: '角色名称',  
                                xtype: "textfield",  
                                maxLength:40  
                            }  
                            ,  
                            {  
       
                                name: 'remark',  
                                fieldLabel: '备注',  
                                xtype: "textfield",  
                                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}  
    });  
  • 相关阅读:
    个人冲刺二(7)
    个人冲刺二(6)
    个人冲刺二(5)
    个人冲刺二(4)
    对称二叉树 · symmetric binary tree
    108 Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
    530.Minimum Absolute Difference in BST 二叉搜索树中的最小差的绝对值
    pp 集成工程师 mism师兄问一问
    17. Merge Two Binary Trees 融合二叉树
    270. Closest Binary Search Tree Value 二叉搜索树中,距离目标值最近的节点
  • 原文地址:https://www.cnblogs.com/hetaojs/p/5760662.html
Copyright © 2011-2022 走看看