ComboBox
var store = new Ext.data.SimpleStore({
fields: ['abbr', 'state', 'nick'],
data : [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['IN', 'Indiana', 'The Hospitality State']
]
}); // 用於填充combobox的下拉數據,可以用 Store實現ajax動態取得下拉框的數據.
var combo = new Ext.form.ComboBox({
id: 'pageCombo'
store: store, // 下拉數據
tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
// 提示信息
displayField:'state', //顯示上面的fields中的state列的內容,相當於option的text值
valueField: 'abbr', // 選項的值, 相當於option的value值
name: 'content',
mode: 'local', // 必須要,如果爲 remote, 則會用ajax獲取數據
triggerAction: 'all', // 點擊下拉的時候, all 爲展出所有Store中data的數據
readOnly: true, // 如果設爲true,則好像一般的下拉框一樣,默認是false,可輸入並自動匹配
emptyText:'Select a state...',
selectOnFocus:true,
hiddenName: 'comBoValue', // 如果有form提交,這個值一定要設置,不然記下選了那個值
// 生成一個hidden的input,用於存放選中的值, 因爲ComboBox是用div和input模擬的,form.submit後取得的是input的值.
});
Ext.getCmp('pageCombo').addListener('change', function(box, newv, oldv) {
alert(newv);
});
// 給ComboBox添加監聽事件,change事件相當於select的onchange事件
FormPanel
<div id='dp' style='width: 120px; height: 30px;'></div>
Ext.onReady(function(){
Ext.form.Field.prototype.msgTarget = 'side';
// 這個設置會使field在allowBlank==false時提示field的emptyText
var myForm = new Ext.form.FormPanel({
// 可用屬性包括了 BasicForm 的屬性
width: 500,
method: 'post',
title: '',
header: false, // 不創建標題欄
headerAsText: false, // 如果有標題欄, 隱藏標題欄
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit(); // 提交form
}
});
myForm.add(combo);
myForm.render('dp'); // 在div中添加這個form
}
Extjs-ComboBox和FormPanel的使用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.