Ext.form.field.ComboBox结合Servlet、JSON实现AutoComplete
2012-05-31 22:28
393 查看
![](http://my.csdn.net/uploads/201205/31/1338473657_7103.jpg)
这是一个利用Ext.form.field.ComboBox实时获取数据的例子,这个combo必须是可以编辑的,在编辑的过程中通过输入的关键词去后台获取相关的数据。由于combo在自身的代码实现中已经实现了autocomplete的功能,只不过没有着重的表达出来,不过我们还是还是可以通过代码挖掘出来。这个是从一个官方的例子衍生而来的,官方的例子还是很全面的。下面我们看具体实现,前端JS代码:
Ext.onReady(function() { Ext.define("Resource", { //定义一个数据模型 extend : 'Ext.data.Model', fields : [{ name : 'text', mapping : 'text' }, { name : 'iconCls', mapping : 'iconCls' }] }); ds = Ext.create('Ext.data.Store', { //定义数据源 model : 'Resource', proxy : { type : 'ajax', url : 'autocomplete', //获取数据的路径 reader : { type : 'json', root : 'root', totalProperty : 'total' } } }); panel = Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), title : '查找资源', width : 600, bodyPadding : 10, layout : 'anchor', items : [{ xtype : 'combo', store : ds, displayField : 'text', typeAhead : false, hideLabel : true, hideTrigger : true, anchor : '100%', minChars : 1, //定义输入最少输入多少个字符的时候获取数据 listConfig : { emptyText : '<div style="line-height:22px;padding:2px 10px">没有找到匹配的数据</div>', getInnerTpl : function() { //通过数据模型定义的内容,自定义展示内容 return '<div class="search-item" >' + '<div class="x-tree-icon x-tree-icon-leaf search-item-icon {iconCls}"></div>' + '{text}' + '</div>' } } }, { xtype : 'component', style : 'margin-top:10px', html : '输入关键词,实时查找后台数据。' }] }); });
后台Java代码:
request.setCharacterEncoding("UTF-8"); String query = request.getParameter("query"); //关键词默认参数名是query,如果需要自定义可以在combo配置 //通过模糊查询获取数据,这里只是粗略的处理。其实整个功能这里才是最精细和关键的,如处理拼音的问题 List<JSONObject> list = BaseDAO.findBySql("select t.text,t.iconCls " + " from resource t " + " where t.text like '%" + query.trim() + "%'"); PageWriter.output(list, response);输出的数据格式是JSON, 在传递中文的时候,注意tomcat或其他应用服务器对于中文的处理。
QQ讨论群:197331959,http://www.hatustudio.com Leetop/Ext项目论坛
http://download.csdn.net/detail/leecho571/4343627 实例下载,里面有个app.sql的数据库文件,用mysql数据库导入即可
相关文章推荐
- Ext的comboBox结合Servlet、JSON实现AutoComplete
- 继承Ext.form.TriggerField,实现树下拉选择(新增示例下载)
- 对Ext.form.TriggerField实现下拉菜单和手动两种方式输入数据
- [导入]继承Ext.form.TriggerField,实现树下拉选择(新增示例下载)
- Extjs实现类似树下拉框Ext.form.TriggerField
- Ext.form.ComboBox实现省、市、县级联
- Ext.form.field.ComboBoxView
- ExtJs4 Ext.form.field.ComboBox 刷新数据出现一直加载的问题
- Ext.form.field.ComboBox示例
- 采用ExtJS4.2的Ext.form.ComboBox实现自动完成
- Ext.form.field.Picker (ComboBox、Date、TreePicker、colorpick.Field)竖向滚动导致布局错误
- Ext.form.ComboBox提交始终获得displayField的值-解决
- 【转】解决Ext.form.ComboBox提交始终获得displayField的值
- Ext.form.field.comboBox
- Ext.form.ComboBox加载json时刻默认选中的解决
- 组合框Ext.form.field.ComboBox
- Ext.form.ComboBox获得displayField的值
- 如果使用Ext.form.ComboBox 作为editor,并设置了store,在选择后,在表格单元中显示的是store中的displayfield 而不是valuefield
- Ext.form.field.ComboBox 切换store没有反应
- 给Ext.form.ComboBox设置默认选中某项