EXT之form.load(转)

大家看下面的简单例子，如果我们要实现一个从后台读取对应数据到对应文本中的操作，在EXT中可以这样来实现

首先要配置form里面的reader属性，这个属性是决定读取数据和前台对应文本的映射，这里用的是JSON格式，所以配置如下（蓝色 部分），读取可以这样操作，写个ACTION，通过传参的方式，获取是需要的JSON数据，然后通过form.load方法来获得数据，如下:

form.getForm().load({

        url:'../action.do?oid=1' ,

        waitTitle:'提示',

        waitMsg:'正在处理您的请求,请稍候...',
        success:function(form,action){}

});

或者这样写

form.getForm().load({

        url:'../action.do' ,

        params:{oid:1},

        waitTitle:'提示',

        waitMsg:'正在处理您的请求,请稍候...',
        success:function(form,action){}

});

 

 

Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';

    var fs = new Ext.FormPanel({
        frame: true,
        title:'XML Form',
        labelAlign: 'right',
        labelWidth: 85,
        width:340,
        waitMsgTarget: true,

        reader : new Ext.data.JsonReader({

            root:'list',

            totalProperty:'totalCount'

        }, [
            {name: 'form中对应的文本框ID' , mapping:'后台对应数据'}         

        ]),

        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'Name',

                        id:'form中对应的文本框ID' ,

                        name: 'name',
                        width:190
                 ]
            })
        ]
    });

    fs.addButton('Load', function(){
        fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
    });

});

FormPanel里面load方法来自于BasicForm的doAction方法，doAction的参数如下：

url : String //访问路径

method : String //访问方式get（默认） 或者 post

params :String/Object//提交参数，如：{id:1,name:'name'}

success : Function //返回成功的处理方法，方法中参数有form(当然form对象),action(后台返回数据对象)

failure : Function //返回失败的处理方法，方法中参数有form(当然form对象),action(后台返回数据对象)

scope : Object //回调函数的作用域，默认为this

clientValidation : Boolean //执行load时候是否检测form中所有子项的合法性，默认为false

评论

1 楼 llixinrui_strive 2015-10-22