本篇介绍如何在客户端绑定数据到Ext.form.ComboBox,并支持手写和联想功能,还提供了显示提示消息的功能.
效果图如下:
代码较为简单,不涉及到后台处理:
<form >
<div><div ></div>
<script type="text/javascript">
//静态绑定数据
function ready()
{
Ext.namespace('Ext.exampledata');
Ext.exampledata.states =
[
['1', '中国', 'The Sunshine State'],
['2', '美国', 'The Peach State'],
['3', '俄罗斯', 'The Aloha State'],
['4', '德国', 'Famous Potatoes'],
['5', '英国', 'The Prairie State'],
['6', '法国', 'The Hospitality State'],
['7', '加拿大', 'The Corn State'],
['8', '澳大利亚', 'The Sunflower State'],
['9', '老挝', 'The Bluegrass State'],
['10', '泰国', 'The Bayou State'],
['11', '印度', 'The Pine Tree State'],
['12', '日本', 'Chesapeake State']
];
Ext.QuickTips.init();
var store = new Ext.data.SimpleStore
({
fields:["name","value","state"],
data:Ext.exampledata.states
});
var comboBox = new Ext.form.ComboBox
({
tpl: '<tpl for="."><div ext:qtip="提示：{name}__{value}__{state}__" class="x-combo-list-item">****{value}*****</div></tpl>',
id:"ComboBox_ID",
editable:true,//默认为true，false为禁止手写和联想功能
store:store,
emptyText:'请选择',
mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
typeAhead: true,
triggerAction: 'all',
valueField:'name',
displayField:'value',
selectOnFocus:true,
renderTo:'hello',
width:200,
frame:true,
resizable:true
});
}
Ext.onReady(ready);
</script>
</div>
</form>