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",
　　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"
　　}]
　　}]
　　});
　　});
　　13.htmleditor简单示例
　　效果图：
　　
　　js代码：
　　//基本上同上
　　Ext.onReady(function(){
　　Ext.QuickTips.init();
　　var myform=new Ext.FormPanel({
　　frame:true,
　　width:600,
　　layout:"form",
　　labelWidth:50,
　　title:"htmleditor简单示例",
　　labelAlign:"top",//items中的标签的位置
　　renderTo:Ext.getBody(),
　　items:[{
　　xtype:"htmleditor",
　　id:"he",
　　fieldLabel:"编辑器",
　　anchor:"99%"
　　}]
　　});
　　});
　　在这里我