Ext的ComboBox组件用法很多,通过配置可以让其变成一个输入框,并且可以存储输入的记录,然后再之后的输入中根据记录进行提示,以提高输入操作的用户体验。
代码很简单,基本操作如下:
// 输入提示
Ext.create("Ext.form.ComboBox", {
renderTo: "放置的组件ID",
name: "input",
labelWidth: 40,
width: 400,
hideEmptyLabel: true, // 隐藏空的文本标签
hideTrigger: true, // 隐藏下拉按钮
queryMode: "local", // 查询方式,远程或是本地
enableKeyEvents: true, // 允许键盘事件
margin: "10 0 0 0",
displayField: "content",
valueField: "content",
store: Ext.create("Ext.data.Store", {
fields: ["content"]
}),
inputData: [], // 保存已经输入的信息
listeners: {
keydown: function(el, e) {
if (e.getKey() === Ext.EventObject.ENTER) {
var has = false;
// 遍历已输入的内容
Ext.each(el.inputData, function(item) {
// 查看输入内容是否存在
if (item.content === el.getValue()) {
has = true;
return false;
}
return true;
});
if (!has) {
// 保存输入内容
el.inputData.push({content: el.getValue()});
// 将输入内容加载到下拉框存储中
el.getStore().loadData(el.inputData);
}
}
}
}
});