`
hanjiangit
  • 浏览: 179170 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

EXT 
阅读更多
上篇中我们讨论了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题，创建的时候：  //查看源代码便知，两种方法是一样的
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("事件！");}}]
    });
都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：
//简化代码，和上面的代码效果一样
var form1 = new Ext.form.FormPanel({
       width:350,
       frame:true,
       renderTo:"form1",
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       defaults:{width:200,xtype:"textfield"},//*****简化****//
       items:[
          {
            fieldLabel:"UserName",
            //xtype:"textfield",
            name:"user",
            id:"user",
            //width:200
          },
          {
            fieldLabel:"PassWord",
            //xtype:"textfield",
            name:"pass",
            id:"pass",
            inputType:"password",
            //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不早了，FormPanel还有很多的东西要了解，但是今天不能再讲了，太多了，大家都没有兴致看下去,明天继续。
extjs的东西很庞大，但是还没有一个人用中文系统的分析写文章，所以资料都很可贵，现在我想做这件事，请大家多多支持，我才有动力，
才有激情，才能写出更好的下一片文章，让我们期待更精彩的next吧!
分享到：
| ExtJs2.0学习系列(3)--Ext.Window
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics