无废话ExtJs 入门教程四[表单:FormPanel]
继上一节内容,我们在窗体里加了个表单。如下所示代码区的第28行位置,items:form。
1.代码如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
9 <!--ExtJs框架结束-->
10 <script type="text/javascript">
11 Ext.onReady(function () {
12 var form = new Ext.form.FormPanel({
13 frame: true,
14 title: '表单标题',
15 style: 'margin:10px',
16 html: '<div style="padding:10px">这里表单内容</div>'
17 });
18 var win = new Ext.Window({
19 title: '窗口',
20 width: 476,
21 height: 374,
22 html: '<div>这里是窗体内容</div>',
23 resizable: true,
24 modal: true,
25 closable: true,
26 maximizable: true,
27 minimizable: true,
28 items: form
29 });
30 win.show();
31 });
32 </script>
33 </head>
34 <body>
35 <!--
36 说明:
37 (1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
38 (2)title: '表单标题':表单的标题,如果不加的话,不会出现上面的浅色表单标题栏。
39 (3)style: 'margin:10px':表单的样式,加了个外10px的外边距。
40 (4)html: '<div style="padding:10px">这里表单内容</div>':表单内显示html的内容。
41 -->
42 </body>
43 </html>
2.效果如下:
3.form 组件常用的:属性、方法及事件
一、属性
width:整型,表单宽度。
height:整型,表单高度。
url:字符串,表单提交地址。
二、方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。
无废话ExtJs 入门教程四[表单:FormPanel]的更多相关文章
- 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器:Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十六[页面布局:Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十三[上传图片:File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程九[数字字段:NumberField、隐藏字段Hidden、日期字段:DataFiedl]
无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...
随机推荐
- 17.5---珠玑妙算,四个槽,红色黄色绿色蓝色(CC150)
思路:注意一下,找猜中的时候什么都不用做,直接统计,找伪猜中也是先不管,然后再把结果减去猜中即可. public static int[] calcResult(String a, String b) ...
- 用批处理启动MySQL命令行工具
最近在看MySQL,安装好之后,每次在开始菜单去启动MySQL命令行工具的时候,都是直接用root用户连接我本地的数据库 输入密码开始工作,但是要连接服务器上的MySQL的话,就要去CMD下运行 : ...
- C# 接口基础
接口只包含方法.属性.事件或索引器的签名. 实现接口的类或结构必须实现接口定义中指定的接口成员 接口中可以包含字段吗? 第一次被问到这个问题的时候被问愣住了,只能回答:印象当中没见过在接口中定义变量 ...
- 《oracle每日一练》Oracle DBLink连接数过多的问题(Ora-02020)
本文转自Oracle DBLink连接数过多的问题(Ora-02020) 今天在处理资料同步问题,需要将其它几个DB Server的资料同步到一个目地资料库,采用的方式是:DBLink+Job ,然而 ...
- Union-Find Algorithm
Union-Find Algrithm is used to check whether two components are connected or not. Examples: By using ...
- Hexo
Hexo Hexo is a fast, simple & powerful blog framework powered by Node.js.
- svn上传报Authorization failed错误解决办法
svn上传文件时没有弹出用户登录界面,而是直接报Authorization failed错误.出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.conf配置文件中的 [ge ...
- mysql日常语句总结
#删除mysql的二进制日志文件 #将删除mysql-bin.*****1之前的日志文件 purge binary logs to 'mysql-bin.*****1'; #重新生成一个二进制日志文件 ...
- redis 中文字符显示
2015年5月20日 09:57:01 星期三 方法一: redis-cli -h --raw 方法二: linux 终端: echo -e "\xe7\xa5\x9e\xe6\xa3\x8 ...
- WCF服务跟踪
如果在开发过程中,WCF服务出现问题,我们可以通过服务引用,然后直接断点调试进去.然而,对于已经发布的服务,出现错误时,寻找错误信息会变得麻烦. 幸好,微软提供了服务跟踪查看器工具 (SvcTrace ...