上一节中我们演示了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" });});
示例截图如下:
点击“设置Values”按钮:
点击“获取Values”按钮,我们打开控制台,截图如下:
还没有人抢沙发呢~