支持手写输入及联想功能的下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11428/article/details/81677350

<!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>