Fork me on GitHub
随笔 - 317  文章 - 1  评论 - 11  阅读 - 27万

表单Ext.form.FormPanel(转)

1、表单

对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel,在Panel的基础上提供与表单相关的各种特性,比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等;另外FormPanel固定使用form布局,前面关于布局一节中的内容我们说过,form布局也就是专门用于组织包含输入元素的布局。

看下面的代码:

复制代码
<script type="text/javascript">
        Ext.onReady(function(){
           new Ext.form.FormPanel({
              renderTo: Ext.getBody(),
              title:"用户信息录入",
              height: 200,
              width: 300,
              labelWidth: 60,
              labelAlign: "right",
              frame: true,
              defaults:{
                 xtype:"textfield",
                 width:180
              },
              items: [
                 {name: "username", fieldLabel: "姓名"},
                 {name: "password", fieldLabel: "密码", inputType: "password"},
                 {name: "email", fieldLabel: "电子邮件"},
                 {xtype: "textarea", name: "intro", fieldLabel: "简介"}
              ],
              buttons:[{text:"提交"}, {text:"取消"}]
           });
        });
        </script>
复制代码

运行效果如下:

在上面的代码中,使用new Ext.form.FormPanel来创建表单面板,通过labelWidth来指定表单中字段标签的宽度,labelAlign来指定字段标签的对齐方式,在defaults中指定该容器中所有子元素默认类型都是textfield,也就是录入文本框。在items定义的子元素中,一共包含三个textfield元素以及一个textarea元素,这些元素都包含一个name属性,相当于传统<input>标签中的name属性,fieldLabel属性用来指定字段标签。

2、BasicForm

表单面板FormPanel包含一个form属性,该属性是一个Ext.form.BasicForm 类型的对象,可以直接访问,也可以通过getForm()方法得到。BasicForm 表示基本的表单,包含了submit、load、reset等方法,用来取代传统表单<form>中的submit、reset等方法,通过调用这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作:

复制代码
<script type="text/javascript">
        Ext.onReady(function(){
           var f=new Ext.form.FormPanel({
              renderTo: Ext.getBody(),
              title:"用户信息录入",
              height: 200,
              width: 300,
              labelWidth: 60,
              labelAlign: "right",
              frame: true,
              defaults:{
                 xtype:"textfield",
                 width:180
              },
              items: [
                 {name: "username", fieldLabel: "姓名"},
                 {name: "password", fieldLabel: "密码", inputType: "password"},
                 {name: "email", fieldLabel: "电子邮件"},
                 {xtype: "textarea", name: "intro", fieldLabel: "简介"}
              ],
              buttons:[{
                 text:"提交",
                 handler: function(){
                    f.form.submit({
                       waitTitle:"请稍候",
                       waitMsg:"正在提交表单数据,请稍候"
                    });
                 }
              }, {
                 text:"重置",
                 handler: function(){
                    f.form.reset();
                 }
              }]
           });
        });
        </script>
复制代码

运行结果如下:

3、Field,表单元素

      Field代表各种各样的数据录入项;在程序中,我们一般直接使用Field的子类,包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。

Field组件一般包括一个fieldLabel属性及name属性。fieldLabel是在Component中定义的,用来定义字段的元素。

4、表单动作Ext.form.Action

  表单动作包括表单内容提交Submit,表单数据加载Load两种。默认情况下都是通过Ajax的方式向服务器端发送数据,提交表单数据或加载表单中的内容。

  关于表单动作Action,我们将在后面的课程中讲解。

posted on   雨为我停  阅读(1709)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· 【译】.NET 升级助手现在支持升级到集中式包管理
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· 并发编程 - 线程同步(二)
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示