zoukankan      html  css  js  c++  java
  • 表单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,
                   300,
                  labelWidth: 60,
                  labelAlign: "right",
                  frame: true,
                  defaults:{
                     xtype:"textfield",
                     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,
                   300,
                  labelWidth: 60,
                  labelAlign: "right",
                  frame: true,
                  defaults:{
                     xtype:"textfield",
                     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,我们将在后面的课程中讲解。

  • 相关阅读:
    【面积并】 Atlantis
    【动态前k大 贪心】 Gone Fishing
    【复杂枚举】 library
    【双端队列bfs 网格图建图】拯救大兵瑞恩
    【奇偶传递关系 边带权】 奇偶游戏
    【权值并查集】 supermarket
    CF w4d3 A. Pythagorean Theorem II
    CF w4d2 C. Purification
    CF w4d2 B. Road Construction
    CF w4d2 A. Cakeminator
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/4829588.html
Copyright © 2011-2022 走看看