今天我們接著深入解析表單元素中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布局，謝謝支持！