1. 程式人生 > >ExtJS Combobox 屬性詳解和預設值選中

ExtJS Combobox 屬性詳解和預設值選中

               

var store = new Ext.data.SimpleStore({
   fields : ['id', 'text'],
   data : [['1', '一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
     ['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
     ['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
});

var combo = new new Ext.form.ComboBox({
   id : 'myCombo',
   name : 'name',// name只是改下拉的名稱
   hiddenName : 'id',// 提交到後臺的input的name ,對應下面store裡的''id,必須要填
   width : 80,
   store : store,// 填充資料
   emptyText : '請選擇',
   mode : 'local',// 資料模式,local代表本地資料
   readOnly : true,// 是否只讀
   value : '',// 預設值,要設定為提交給後臺的值,不要設定為顯示文字,可選
   triggerAction : 'all',// 顯示所有下列資料,一定要設定屬性triggerAction為all
   allowBlank : false,// 不允許為空
   valueField : 'value',// 值,可選
   displayField : 'text',// 顯示文字 ,對應下面store裡的'text',
   editable : false,// 是否允許輸入
   forceSelection : true,// 必須選擇一個選項
   blankText : '請選擇'// 該項如果沒有選擇,則提示錯誤資訊,
   listeners : {
      afterRender : function(combo) {
         var firstValue = store.reader.jsonData[0].text;
         combo.setValue(firstValue);//同時下拉框會將與name為firstValue值對應的 text顯示
      }
   }

});
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});

//combobox裡的id一定要設定,並且不能和hiddenname的值相同,然後通過Ext.getCmp(id值).setValue(value)即可達到html裡的select效果,注意這裡的value表示的是store裡的第幾項!

           

再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!希望你也加入到我們人工智慧的隊伍中來!

http://www.captainbed.net

這裡寫圖片描述