实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值
上一节中我们演示了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”按钮,我们打开控制台,截图如下:
实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值的更多相关文章
- 实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据
ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...
- 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件
上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...
- 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...
- 实用ExtJS教程100例-007:ExtJS中Window组件最小化
在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...
- 实用ExtJS教程100例-006:ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
随机推荐
- open-falcon v0.2 监控部署记录
前言 好吧,不知道为什么要写,其实,官方文档已经很详细.但是,总是想写点什么,怕自己忘记了.那就简单说说吧,在部署过程中,发现官方文档和我想的不一样,可能是我按照顺序习惯了,所以想从新跟着顺写来记录一 ...
- spark优化:spark.serializer修改序列化方式
进行节点的数据传递,或者保存数据时都会进行序列化.spark默认的是org.apache.spark.serializer.JavaSerializer.而我们要修改成org.apache.spark ...
- SOCKET简单爬虫实现代码和使用方法
抓取一个网页内容非常容易,常见的方式有curl.file_get_contents.socket以及文件操作函数file.fopen等. 下面使用SOCKET下的fsockopen()函数访问Web服 ...
- ubuntu下设置jupyter notebook 2017年07月29日 19:28:34 小旋锋 阅读数:8329 标签: ubuntu 更多 个人分类: python 二三事 来源:http://blog.csdn.net/suzyu12345/article/details/51037905 Ipython Notebook现在已经改名为Ipython jupyter,是最知名最好用的
ubuntu下设置jupyter notebook 来源:http://blog.csdn.net/suzyu12345/article/details/51037905 Ipython No ...
- 003.iSCSI客户端管理
一 启动器介绍 iSCSI启动器通常在软件中实施,也可以采用硬件启动器.软件启动器需要安装iSCSI-initiator-utils软件包.包含如下文件: /etc/iscsi/iscsid.conf ...
- 004.Autofs自动挂载
一 安装autofs [root@imxhy data]# yum -y install autofs 二 编辑自动挂载相关配置 2.1 修改master [root@imxhy ~]# vi /et ...
- yaml.parser.ParserError
ERROR: yaml.parser.ParserError: while parsing a block mapping in "./docker-compose.yml", l ...
- Codeforces Round #396 (Div. 2) D. Mahmoud and a Dictionary 并查集
D. Mahmoud and a Dictionary 题目连接: http://codeforces.com/contest/766/problem/D Description Mahmoud wa ...
- Codeforces Round #374 (Div. 2) A. One-dimensional Japanese Crosswor 水题
A. One-dimensional Japanese Crossword 题目连接: http://codeforces.com/contest/721/problem/A Description ...
- tesseract-ocr识别中文扫描图片实例讲解
当我浏览http://code.google.com/p/tesseract-ocr并下载了几个文件下来之后顿时感到一头雾水,不知该如何下手.网上看到有人在linux操作系统下的实现, 如: 利用开源 ...