资源描述：
《ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)N久没有写extjs的，作为一个新手，我为我的这种懒惰行为感到惭愧！鉴于有朋友反应前面的文章过于简单，我决定以后的文章如果没有闪光点就放在新手区(如果不适合，请跟帖)，不放在首页！11.checkbox简单示例效果图：js代码：Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", labelWi
2、dth:30, title:"checkbox简单示例", labelAlign:"left", renderTo:Ext.getBody(), items:[{ xtype:"panel", layout:"column",//也可以是table,实现多列布局 fieldLabel:'爱好', isFormField:true,//非常重要,否则panel默认不显示fieldLabel items:[{ columnWidth:.5,//宽度为
3、50% xtype:"checkbox", boxLabel:"足球",//显示在复选框右边的文字 name:"" },{ columnWidth:.5, xtype:"checkbox", boxLabel:"篮球", name:"" }] }] });});关于多列布局，我们可以使用column或者tabl
4、e布局解决！//其他几个参数1.checked：true//true则选中，默认为false2.name:"**"//name值3.value:""//初始化值，默认为undefine12.radio简单示例基本上和checkbox一样，不过注意一组单选框必须name值相同，才能单选。效果图：代码：//基本同上，不做过多解释Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", l
5、abelWidth:30, title:"radio简单示例", labelAlign:"left", renderTo:Ext.getBody(), items:[{ xtype:"panel", layout:"column", fieldLabel:'性别', isFormField:true, items:[{ columnWidth:.5, xtype:"radio", boxLabe
6、l:"男", name:"sex" //inputValue },{ columnWidth:.5, checked:true, xtype:"radio", boxLabel:"女", name:"sex" }] }] });});13.htmleditor简单示例效果图：js代码：//基本上同上Ext.onReady(function(){ Ext
7、.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:600, layout:"form", labelWidth:50, title:"htmleditor简单示例", labelAlign:"top",//items中的标签的位置 renderTo:Ext.getBody(), i
