ExtJS的使用方法汇总(2)——表单与输入控件

上篇文章《ExtJS的使用方法汇总(1)——配置和表格控件使用》

地址为：http://blog.csdn.net/rocket5725/archive/2009/09/09/4535323.aspx

写了ExtJS的配置以及表格控件的使用方法，相信大家在学习的过程中已经基本知道了如果搭建ExtJS开发环境以及使用ExtJS的基本功能。

表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。本文就是简单介绍表单与输入控件的使用方法。

一、创建一个简单的表单

1、具体配置信息参考上篇文章

2、创建简单表单的实现代码如下所示：

<mce:script type="text/javascript"><!-- Ext.onReady(function(){ var form=new Ext.form.FormPanel({ defaultType:'textfield', labelAlign:'right', title:'form', labelWidth:50, frame:true, width:220, items:[{ fieldLabel:'文本框' }], buttons:[{ text:'按钮' }] }); form.render("div1"); }); // --></mce:script>

3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。具体实现效果如图1所示。

图1 简单的表单

二、FormPanel和BasicForm详解

如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.FormPanel的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分ÿ