ExtJs之FormPanel篇

表单时是web中常见的元素，Ext中的表单也是特别丰富的，接下来我们一块看看表单的相关内容。

还是先看一下代码和效果：

Ext.onReady(function(){var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel        title:'用户登录',
width:300,//height:250,        bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的        url:'login.aspx',//提交地址        method:'post',//提交方法        defaults:{ //在这里同一定义item中属性，否则需要各个指明            xtype:'textfield',
labelAlign:'left',
labelWidth:80,
width:100
},
items:[
{
fieldLabel:'用户名',
xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替                name:'userName',
id:'userName'//width:100            },
{
fieldLabel:'密码',//xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替                inputType:'password',
name:'userPwd',
id:'userPwd'//width:100            }
],
buttonAlign:'center',//按钮对其方式        buttons:[
{
text:'确定'
},
{
text:'取消',
handler:function(){//点击取消按钮的操作事件                    fp.hide();
}
}
]
});
}); 

FormPanel也比较好用，但是我认为我们有必要就上面xtype和inputType说几点。

大家其实很多时候会发现，在Ext组件中（对于所有容器组件[这里就是可以有子组件的组件]）items里面基本上有两种存在形式，一种就是像上面一样我们直接以Json的形式进行配置；另一种就是既然items中是一个个item，我们可以定义一个对象放到里面，例如假设在一个panel中还有一个子panel，我们就可以直接var pn=new Ext.Panel({…});然后放到items中。上面的话我再强调一下，它不仅仅针对FormPanel，而是对于所有容器组件都是这样。不妨看一个例子，我觉得大家经常看到这样的代码：

var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[new Ext.Panel({title:'子panel1',html:'子panel1内容'}),new Ext.Panel({title:'子panel2',html:'子panel2内容'})
]
}); 

以至于很多初学者认为像上面的代码不能够写成下面的形式：

var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{…}，
{…}
]
}); 

其实这是对于xtype不太了解的原因。Ext中xtype和Class（类）是一一对应的，所以既然上面items中是panel对象，那么就有对应的xtype，事实上我们可以知道它对应"panel"，那么既然是这样，上面的代码当然可以写成第第一种存在形式：

var panel=new Ext.Panel({
renderTo:"divPanel",
title:"我的面板",
width:400,
height:300,
items:[
{xtype:'panel',title:'子panel1',html:'子panel1内容'},
{xtype:'panel',title:'子panel2',html:'子panel2内容'}
]
}); 

事实上从本质上来讲上面两种情况是一样的，只是表现形式不同而已，那么对于上面的代码如何用第二种方式呢，你会问，像{    fieldLabel:'用户名',    xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替name:'userName',id:'userName'    //width:100    }这样的代码是什么对象呢？其实它对应的是"Ext.form.TextField"。这里放上一张对应表：

好了，说了那么多xtype，inputType还没有说呢。我们说xtype和class是对应的，当然表单中xtype和class都有inputType属性，而且最为有意思的是对于form中的元素inputType的取值范围是一样的，什么意思呢？我们还看例子（我们直接对上面的代码精简好了，这个例子中我们就用class形式好了）：

var fp=new Ext.form.FormPanel({
title:'用户登录',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[new Ext.form.Radio({
boxLabel:'男',
name:'sex',
id:'male'
}),new Ext.form.Radio({
boxLabel:'女',
name:'sex',
id:'sex_female'
})
]                
}); 

上面这个例子很简单（不太好看，因为到这里还没有说到form中相关控件，所以没有在布局上花功夫），也很容易理解，就是Radio控件吗。但是我修改过inputType之后呢：

var fp=new Ext.form.FormPanel({
title:'用户登录',
width:300,
bodyStyle:'padding:5px 5px 0',
renderTo:'divFormPanel',
frame:true,
items:[new Ext.form.Radio({
boxLabel:'男',
inputType:'textfield',
name:'sex',
id:'male'
}),new Ext.form.Radio({
boxLabel:'女',
inputType:'file',
name:'sex',
id:'sex_female'
})
]                
}); 

可以说上面的代码如果对于初学者来说肯定想不到一个radio变成了textfield，另一个变成了file。不是创建的Radio对象吗？怎么成了其他的控件，这个就是Ext中inputType的特殊之处。

好了，就先到这里吧！