今天我们接着深入解析表单元素中ComboBox组件的使用
5.服务器数据作为ComboBox的数据源实例
首先从服务器获取json数据：
//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string  ServerData="['湖北','江西','安徽']";

//aspx前台js介绍代码 
Ext.onReady(function(){
       var combo=new Ext.form.ComboBox({
            store:<%=ServerData%>,//获取ServerData的string值，不要用""引起来，否则就不是object数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的object数据，是不是超级方便。
            emptyText:'请选择一个省份.',
            applyTo: 'combo'
        });
    });

//aspx前台html代码
<input type="text" id="combo" size="20"/>


我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。问题来了，js和html怎么调用c#后台
的变量和方法？（变量的调用上面刚刚介绍）
7.ComboBox的数据源store格式详解
在前面的例子里面，我们一直给ComboBox的数据源store赋值一维数组，其实store支持多维和Store.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组：["江西","湖北"]，值同时赋给ComboBox的value和text
2.二维和多维数组：[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给value和text，其他维忽略
3.store类型：包括GroupingStore, JsonStore, SimpleStore.
    //我们分三步走：
     //第一步：提供数据：
         var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
    //第二步：导入到store中：
         var store = new Ext.data.SimpleStore({
             fields: ['chinese', 'english'],
             data : data
        });
     //第三步 :把store托付给comboBox的store
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'english',//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当select列表时displayField为"text"
        mode: 'local',//因为data已经取数据到本地了，所以'local',默认为"remote"，枚举完
        emptyText:'请选择一个省份',
        applyTo: 'combo'
    });

8.ComboBox的value获取
//ComboBox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个       
              listeners:{
                "select":function(){
                            alert(Ext.get("combo").dom.value);   //获取id为combo的值
                         }
            }
//这里我们提供了一种不是很好的方法，在此不做过多停留


9.把Extjs的ComboBox样式应用到select的下拉框中去
核心参数介绍
transform:id//用于转换样式的，TimeField作为ComboBox的子类也有此属性
核心代码：
//js代码
var ExtSelect=new Ext.form.ComboBox({
             transform:"select",//html中的id
             width:80//宽度
         });
//html代码
<select id="select">
        <option value="1">浪曦</option>
        <option value="2">博客园</option>
        <option value="3">百度</option>
        <option value="4">新浪</option>
    </select>
//是不是超级简单？

10.ComboBox的其他重要参数
1.valueField:"valuefield"//value值字段
2.displayField："field" //显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250
//其他参数，请参考api，或自行尝试

11.checkbox简单示例


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简单示例


//基本上同上
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%"
      }]
  });
});


在这里我啰嗦个参数：
//labelAlign参数
   labelAlign:此参数是指form表单中items各项的label位置，默认值为left，枚举值有left,right,top
//我看见过有朋友认为此参数指title的位置，是错误的！

几个其他的参数：

//补充几个参数
1.hideLabel:true//默认为false，还适用于有标签的所有表单组件
//下面的一组参数控制编辑器的工具栏选项,都是默认值为true
2.enableColors：true//默认为true，显示字体颜色，字体背景颜色
3.enableAlignments:true//左，中，右对齐
4.enableFont：true//字体
5.enableFontSize:false//字体大小，就是A旁边有个小箭头的
6.enableFormat：false//粗体，斜体，下划线
7.enableLinks:true//链接
8.enableLists：true//列表
9.enableSourceEdit：true//源代码编辑

14.datefield简单示例


Ext.onReady(function(){
  Ext.QuickTips.init();
  var myform=new Ext.FormPanel({
     frame:true,
     width:200,
     layout:"form",
     labelWidth:30,
     title:"dateditor简单示例",
     labelAlign:"left",
      renderTo:Ext.getBody(),
     items:[{
          xtype:"datefield",
          fieldLabel:"生日",
          anchor:"99%"
      }]
  });
});

17.triggerfield简单示例

Ext.onReady(function(){
  Ext.QuickTips.init();
  var myform=new Ext.FormPanel({
     frame:true,
     width:200,
     layout:"form",
     labelWidth:30,
     title:"triggerfield简单示例",
     labelAlign:"left",
      renderTo:Ext.getBody(),
     items:[{
          xtype:"trigger",
          fieldLabel:"触发",
          anchor:"99%",
          onTriggerClick:function(e){
              //在这里写你要实现的事件，很容易扩展
              alert("www.langsin.com");
          }
      }]
  });
});


好了，关于form的几个基本组件我们都蜻蜓点水的看了一遍，相信大家感性上知道是怎么回事啦！（总算快写完了formpanel）
前面有朋友说要做个一行多个控件，中间有文字的那种form布局，谢谢支持！