| 支持手写输入及联想功能的下拉框 |
| 2008-05-04 | |
|
在web应用中，select控件是经常用到的，ext的select控件其功能完全相当于VC++或VB的combobox，支持选择、手写、最令人惊喜的是支持对option值的手写联想功能。下面我们来看一个这样的combobox实例 在线体验：http://www.extshow.com/sysdemo/js/comboboxDemo1/ 下载实例：http://www.extshow.com/sysdemo/js/comboboxDemo1/comboboxDemo1.rar 本实例不含ext库，请自行添加 <!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> |
| < 上一篇 | 下一篇 > |
|---|