可输入可联想的下拉列表的实现——Ext ComboBox

网上这样的控件不少，有很多实现方法，其中不少的很巧妙。
    例如：在文本框（HTML INPUT）后，添加一个隐藏层，隐藏层上放一个下拉列表，存储了所有可能的元素，每次文本框触发onpropertychange事件，就是对隐藏层上下拉列表数据的过滤显示。而选择下拉列表，则对文本框进行赋值......然后我们可以通过一些CSS技巧，将它的外观调整成一个可输入可联想下拉列表的模样。

    当然，本文并不打算对上述实现方式进行讨论，而是将EXT中一些实用的控件，“便宜地”添加到我们的项目中来（EXT版本1.1.1）。是的，我强调的是“便宜”！

    EXT上有一种控件ComboBox，就包含了这样的特性，而我们要使用它，标准的做法是：

    1. 首先，你需要将ext-1.1.1（如果你要使用它的样式，那么里面的resource是必须的——样式定义，以及它所依赖的图片都放在里面）添加到项目中来，在需要使用ComboBox的页面添加JS（必须）和CSS引用路径：

<link rel="stylesheet" type="text/css" href="../js/ext-1.1.1/resources/css/ext-all.css" />

<script type="text/javascript" src="../js/ext-1.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-1.1.1/ext-all.js"></script>
    注意路径哦！

    2. 你需要一个载体，EXT就是这样，布局需要document.body，Grid需要<div>，而ComboBox则需要一个<input type="text">：

<input type="text" id="local1"/>
    3. 新建一个JS文件，其间包括对存储结构的定义和ComboBox属性的定义：

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']
         ];

        // 格式化数据
    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.value
                 typeAhead: true,
                 displayField: 'name',      // option.text
                 triggerAction: 'all',
                 emptyText:'Select a store...',
                 mode: 'local',
                 selectOnFocus:true,
                 width:135
         });
   
         storeList.applyTo('local1');
});

    上面的数据来源是一个写死的2维数组。同样的道理，你的数据源可以来自一个链接——请求一个页面，而该页面的Response返回一个符合Json格式的字符串（EXT里面最常用的存储方式是JSON），那么Ext.data.Store的定义就变成了这样： var store = new Ext.data.Store({
         proxy:new Ext.data.ScriptTagProxy({     url:'http://localhost:17319/KBS/Grid/EditString.aspx'}),    // 数据源
         reader: new Ext.data.JsonReader({      // 解析格式
             totalProperty : 'totalCount',                // 用于分页  
             root : 'root',
             id : 'id'
         },
         [
                 {name: 'id'},
                 {name: 'name'},
                 {name: 'depno'},
                 {name: 'sex'}
         ])
});    如此，需要请求页面返回的String符合这样的格式，例如： {
         'totalProperty':100,
         'root':[
                 {'id':'a1', 'name':'Lislie', 'depno':'D001', 'sex':'Male'},
                 {'id':'a2', 'name':'Merry', 'depno':'D002', 'sex':'Female'},
                 {'id':'a3', 'name':'Jone', 'depno':'D003', 'sex':'Female'},
                 {'id':'a4', 'name':'Mark', 'depno':'D004', 'sex':'Male'}
         ]
}
    网上有不少将DataTable或Model转JSON的工具类，当然也也可以自己写，反射+字符串的拼接。

    3. 最后，将这个JS引用到页面上。那么一个可输入可联想的控件便出来了。这里有一个小的BUG（暂且用这个词吧），ComboBox终究是放在一个<input>上。

    在前台，你可以通过storeList.getValue()获取当前的选中项的option.value（如果是手动输入的项，而非经过联想选中的项，storeList.getValue()得到的是''，你只能获取到storeList.getRawValue()即<input>的value。需要在点击保存按钮时，在onclick事件中将两者的值设置为一致：“onclick='javascript:storeList.setValue(storeList.getRawValue);'”）。

    而在后台，你无法像操作<select>一样，获取它的option.value，而只得到它的text。也只能操作这个Text了。

    总结：如果你的数据库操作放在前台，那么你完全可以将ComboBox当成一个<select>（功能更强大，允许你输入不存在的项）。如果你的数据库操作放在后台，那么，你只能操作它的Text了，而所谓的可联想、可输入下拉列表，其实是一个糊弄人的文本框而已。

    ------------------------------------------------------------------------------

    老实说，上面的实现过程还是很麻烦，这里有一个很简单的实现方式——其实EXT研发小组已经替我们完成了这一步，是的，仔细看API，你会发现：

    你可以将一个带数据的<select>轻松的转化为ComboBox，哪怕它是asp的控件<asp:DropdownList>。而这个转化过程，就是ComboBox的一行属性：

var storeList;

Ext.onReady(function(){
         Ext.QuickTips.init();
         storeList = new Ext.form.ComboBox({   
                 typeAhead: true,
                 triggerAction: 'all',
                 emptyText:'Select a store...',
                 mode: 'local',
                 selectOnFocus:true,
                 transform:'AList',         // 将已存在select（通过id）直接转ComboBox
                 width:135
         });
})
    缺陷是，手动输入的不存在的项，在后台无法取到。

    两种方式区别：由于载体的不同，一个<input>，一个<select>，导致在后台，我们取值方法和取的内容也不同。虽然说，两者在外观和功能上一模一样，但后者才能真正算可输入可联想的下拉列表吧！