可输入可联想的下拉列表的实现——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事件中将两者的值设置为一致：“οnclick='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>，导致在后台，我们取值方法和取的内容也不同。虽然说，两者在外观和功能上一模一样，但后者才能真正算可输入可联想的下拉列表吧！