extjs技术交流,欢迎加群(201926085)

继上一节内容,我们在窗体里加了个表单。如下所示代码区的第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]的更多相关文章

  1. 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  2. 无废话ExtJs 入门教程十四[文本编辑器:Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  3. 无废话ExtJs 入门教程十七[列表:GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  4. 无废话ExtJs 入门教程十六[页面布局:Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  5. 无废话ExtJs 入门教程十三[上传图片:File]

    无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  6. 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]

    无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...

  7. 无废话ExtJs 入门教程十一[下拉列表:Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  8. 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  9. 无废话ExtJs 入门教程九[数字字段:NumberField、隐藏字段Hidden、日期字段:DataFiedl]

    无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...

随机推荐

  1. Python统计百分比及排序

    source.txt: 60行 89 91 93 90 92 92 94 92 89 95 93 92 90 92 93 94 94 92 90 92 92 92 ... 统计各个值的百分比,并排序 ...

  2. Xcode 6 正式版如何创建一个Empty Application

    Xcode 6 正式版里面没有Empty Application这个模板,这对于习惯了纯代码编写UI界面的程序员来说很不习惯. 有网友给出了一个解决方法是,把Xcode 6 beta版里面的模板复制过 ...

  3. jQuery清除文本框,内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  4. SharePoint更改密码

    stsadm –o updatefarmcredentials –userlogin DomainName\UserName -password NewPassword –local  1. 通过管理 ...

  5. MDI窗体

    1.设置父窗体 使用MDI窗体,需要先将父窗体的IsMdiContainer属性设置为True 2.生成用于MDI子窗体的窗体 1 frmTemp f1 = new frmTemp(); f1.Tex ...

  6. Android 程序中得到root activity的引用

    今天写anroid时,想获得一个root activity的引用. ios中这个很简单, [UIApplication sharedApplication].keyWindow 得到window对象, ...

  7. nginx 原理&知识

    2015年6月4日 17:04:20 星期四 发现两个关于nginx原理的系列文章, 非常好 http://blog.sina.com.cn/s/blog_6d579ff40100wi7p.html ...

  8. Windows下配置Java开发环境

    学习Java第一步是配置本地开发环境,学习最基本的桌面开发,下面以win7为例配置Java开发环境,即:JDK+JRE+Eclipse,安装JDK的时候会默认安装JRE,根据提示安装就可以了. 首先去 ...

  9. C# Winform中如何获取文件名与文件路径

    获取文件名方法: 用System.IO.Path.GetFileName和System.IO.Path.GetFileNameWithoutExtension(无扩展名)的方法 获取文件路径方法: / ...

  10. Effective C++ -----条款11: 在operator=中处理“自我赋值”

    确保当对象自我赋值时operator=有良好行为.其中技术包括比较“来源 对象”和“目标对象”的地址.精心周到的语句顺序.以及copy-and-swap. 确定任何函数如果操作一个以上的对象,而其中多 ...