支持手写输入及联想功能的下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var data =
[
['1','Lislie','D005','male'],
['2','Merry','D004','female'],
['3','Edison','D003','male'],
['4','Mark','D002','male'],
['5','Leeon','D001','male']
];
// 格式化数据，数据也可采用json数据
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data), // 数据源
reader: new Ext.data.ArrayReader({}, [ // 如何解析
{name: 'id'},
{name: 'name'},
{name: 'depno'},
{name: 'sex'}
])
});
ds.load();
var storeList = new Ext.form.ComboBox({
store: ds,
valueField:'id', // option的值
typeAhead: true,
editable:true,//默认为true，false为禁止手写和联想功能
displayField: 'name',//option的显示文本
triggerAction: 'all',
emptyText:'请选择',
mode: 'local',
selectOnFocus:true,
renderTo:'show',
width:135
});
//取得option值函数
function getVal(){
var val = storeList.getValue();//取得option值
alert(val);
}
storeList.on('select', getVal);//当选择时触发该函数
});
</script>
<div id="show"></div>
</body>
</html>