ExtJS(4)--Ext.FormPanel

最新推荐文章于 2018-08-06 17:18:07 发布

The-Only

最新推荐文章于 2018-08-06 17:18:07 发布

阅读量692

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/theon1y/article/details/9718805

版权

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先弄清楚这个问题，创建的时候：

//查看源代码便知，两种方法是一样的

Ext.form.FormPanel = Ext.FormPanel;

<div id="form1"></div>

简单应用例子

Ext.onReady(function () {
  var form1 = new Ext.form.FormPanel({
    width:350,
    frame:true,//圆角和浅蓝色背景
    renderTo:"form1",
    title:"this is formPanel",
    bodyStyle:"padding:5px 5px 0",
    items:[{
      fieldLabel:"UserName",//表单文本款前面的字
      xtype:"textfield",//表单文本框
      name:"user",
      id:"user",
      width:200
      },{
      fieldLabel:"PassWord",//表单文本款前面的字
      xtype:"textfield",//表单文本框
      name:"pass",
      id:"pass",
      width:200
    }],
    buttons:[{text:"ok"},{text:"concel"}]
  });
});

关于inputType,参数如下：

//input的各种类型（这个大家都知道，就只列了几个典型的）

radio

check

text(默认)

file

password等等

关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：

1.labelAlign:fieldlabel的排列位置，默认为"left"，其他两个枚举值是"center","right"

2.labelWidth:fieldlabel的占位宽

3.method:"get"或"post"

4.url："提交的地址"

5.submit:提交函数

1.FormPanel的fieldset应用

Ext.onReady(function () {
  var form1 = new Ext.form.FormPanel({
    width:350,
    frame:true,//圆角和浅蓝色背景
    renderTo:"form1",
    title:"this is formPanel",
    bodyStyle:"padding:5px 5px 0",
    
    items:[{
      xtype:"fieldset",
      title:"个人信息",
      collapsible:true,
      autoHeight:true,
      width:330,
      defaults:{width:150},
      defaultType:"textfield",
      items:[{
        fieldLabel:"爱好",
        name:"haby",
        value:"hoho"
      },{
        xtype:"combo",
        name:"sex",
        store:["男","女","保密"],
        fieldLabel:"性别",
        emptyText:"请选择性别"
      }]
      
      },{
      fieldLabel:"PassWord",//表单文本款前面的字
      xtype:"textfield",//表单文本框
      name:"pass",
      id:"pass",
      width:200
    }],
    buttons:[{text:"ok"},{text:"concel"}]
  });