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

上篇中我们讨论了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();}}]    });

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索表单
， 代码
， width
， textfield
， formpanel
， 表单ext
， 元素checkbox动态formpanel
， fieldLabel
， renderTo
extJs文本框
，以便于您获取更多的相关知识。