时间: 2020-09-5|tag:30次围观|0 条评论

上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值。

 

使用JSON数据为字段赋值

var formCmp = this.up("form");var form = formCmp.getForm();var userValues = {    UserName: "Qi Fei",    Email: "youring2@gmail.com"};form.setValues(userValues);

在这段代码中,我们首先得到form组件,然后在得到form basic对象,form basic对象提供了form组件的字段管理、验证以及提交和加载工作。像上一节中的load和submit方法也都是form basic提供的,form basic才是运行在界面背后的强力支持。

在得到form basic以后,我们声明一个JSON对象,然后调用form basic的setValues方法为form字段赋值。

获取Form中字段的值

var formCmp = this.up("form");var form = formCmp.getForm();var userValues = form.getValues();console.log(userValues);

这段代码中的前两行与上面的相同,得到form basic对象,在第三行中,通过调用getValues方法取得字段的值,返回值为JSON对象。

在得到form字段的JSON数据以后,我们使用console.log()方法将数据打印出来。

在线示例

完整的示例代码如下:

Ext.onReady(function () {    Ext.create("Ext.form.FormPanel", {        title: "ExtJS Form设置和获取Values",        width: 350,        height: 300,        x: 30,        y: 30,        layout: "form",        bodyPadding: "5",        defaultType: "textfield",        fieldDefaults: { labelAlign: "right", labelWidth: 55 },        items: [            { name: "UserName", fieldLabel: "用户名", allowBlank: false },            { name: "Email", fieldLabel: "电子邮箱" }        ],        buttons: [            {                text: "设置Values",                handler: function () {                    var formCmp = this.up("form");                    var form = formCmp.getForm();                    var userValues = {                        UserName: "Qi Fei",                        Email: "youring2@gmail.com"                    };                    form.setValues(userValues);                }            },            {                text: "获取Values",                handler: function () {                    var formCmp = this.up("form");                    var form = formCmp.getForm();                    var userValues = form.getValues();                    console.log(userValues);                }            },            {                text: "重置",                handler: function () {                    var formCmp = this.up("form");                    formCmp.getForm().reset();                }            }        ],        renderTo: "container"    });});

示例截图如下:

image

点击“设置Values”按钮:

image

点击“获取Values”按钮,我们打开控制台,截图如下:

image

 

文章转载于:https://www.cnblogs.com/youring2/p/extjs-100-examples-form-set-get-values.html

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《开放、平等、协作、快速、分享
   

还没有人抢沙发呢~