注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

Ext.FormPanel入门  

2010-03-31 10:43:39|  分类: ext |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

首先弄清楚这个问题,创建的时候:

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

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("事件!");}}]

     });

Ext.FormPanel入门 - 大将军 - 我的博客

都是通过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,参数如下:

Ext.FormPanel入门 - 大将军 - 我的博客//input的各种类型(这个大家都知道,就只列了几个典型的)

Ext.FormPanel入门 - 大将军 - 我的博客radio

Ext.FormPanel入门 - 大将军 - 我的博客check

Ext.FormPanel入门 - 大将军 - 我的博客text(默认)

Ext.FormPanel入门 - 大将军 - 我的博客file

Ext.FormPanel入门 - 大将军 - 我的博客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:'请选择性别.'

                 }]

             }

        ]

Ext.FormPanel入门 - 大将军 - 我的博客

这里的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

  评论这张
 
阅读(484)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017