ExtJs2.0学习系列（7）--Ext.FormPanel之第四式（其他组件示例篇）

ExtJs2.0学习系列（7）--Ext.FormPanel之第四式（其他组件示例篇）2010-04-21 博客园谦虚的天下N久没有写extjs的，作为一个新手，我为我的这种懒惰行为感到惭愧！

鉴于有朋友反应前面的文章过于简单，我决定以后的文章如果没有闪光点就放在新手区（如果不适合，请跟帖），不放在首页！

11.checkbox简单示例

效果图：

js代码：

Ext.onReady（function（）{
Ext.QuickTips.init（）;
var myform=new Ext.FormPanel（{
 frame:true,
 width:330,
 layout:"form",
 labelWidth:30,
 title:"checkbox简单示例",
 labelAlign:"left",
 renderTo:Ext.getBody（）,
 items:[{
 xtype:"panel",
 layout:"column",//也可以是table,实现多列布局
 fieldLabel:"爱好",
 isFormField:true,//非常重要,否则panel默认不显示fieldLabel
 items:[{
 columnWidth:.5,//宽度为50%
 xtype:"checkbox",
 boxLabel:"足球",//显示在复选框右边的文字
 name:""
 },{
 columnWidth:.5,
 xtype:"checkbox",
 boxLabel:"篮球",
 name:""
 }]
 }]
}）;
}）;

关于多列布局，我们可以使用column或者table布局解决！

//其他几个参数
1.checked：true//true则选中，默认为false
2.name:"**"//name值
3.value:""//初始化值，默认为undefine

12.radio简单示例

基本上和checkbox一样，不过注意一组单选框必须name值相同，才能单选。

效果图：

代码：

//基本同上，不做过多解释
Ext.onReady（function（）{
Ext.QuickTips.init（）;
var myform=new Ext.FormPanel（{
 frame:true,
 width:330,
 layout:"form",
 labelWidth:30,
 title:"radio简单示例",
 labelAlign:"left",
 renderTo:Ext.getBody（）,
 items:[{
 xtype:"panel",
 layout:"column",
 fieldLabel:"性别",
 isFormField:true,
 items:[{
 columnWidth:.5,
 xtype:"radio",
 boxLabel:"男",
 name:"sex"
 //inputValue
 },{
 columnWidth:.5,
 checked:true,
 xtype:"radio",
 boxLabel:"女",
 name:"sex"
 }]
 }]
}）;
}）;