Extjs formPanel

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

Ext.form.FormPanel = Ext.FormPanel;

 

一个简单的实例:

<!--html代码-->

<body>

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

</body>

//js代码

var form1 = new Ext.form.FormPanel({

      width:350,

      frame:true,//圆角和浅蓝色背景

      renderTo:"form1",//呈现

      title:"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:"确定"},{text:"取消",handler:function(){alert("事件!");}}]

    });

 

关于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应用

//把前面代码重写items属性

items:[

          {

            xtype:'fieldset',

            title: '个人信息',

            collapsible: true,

            autoHeight:true,

            width:330,

            defaults: {width: 150},

            defaultType: 'textfield',

            items :[{

                    fieldLabel: '爱好',

                    name: 'hobby',

                    value: 'www.cnblogs.com'

                },{

                    xtype:"combo",

                    name: 'sex',

                    store:["男","女","保密"],//数据源为一数组

                    fieldLabel:"性别",

                    emptyText:'请选择性别.'

                }]

            }

      ]

这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨。
2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:

Form components

---------------------------------------

form            Ext.FormPanel

checkbox        Ext.form.Checkbox

combo            Ext.form.ComboBox

datefield        Ext.form.DateField

field            Ext.form.Field

fieldset        Ext.form.FieldSet

hidden          Ext.form.Hidden

htmleditor      Ext.form.HtmlEditor

label            Ext.form.Label

numberfield      Ext.form.NumberField

radio            Ext.form.Radio

textarea        Ext.form.TextArea

textfield        Ext.form.TextField

timefield        Ext.form.TimeField

trigger          Ext.form.TriggerField


你可能感兴趣的:(职场,ExtJs,例子,FormPanel,休闲)