目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择。

实现:extjs3 中combobox自身带这个功能即在remote模式下,store在load的时候会将用户输入作为参数传递到后台。

需要设置的属性:

1. hideTrigger: true, // 去掉右侧的小标志

2. mode : 'remote', // 数据需要远程下载

3. minChars:2, // 设置用户输入字符多少时触发查询

4. queryParam: 'userinput', // 设置用户传递参数的名称,默认是 ‘query’

store的定义: (这里的method 设置为 post ,如果是get方式的话,输入中文的话 后台需要url转码)

  var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({ url : WEB_CONTEXT+'xxx.action',
method:'post'
}),
reader : new Ext.data.JsonReader({}, [{
name : 'VALUE'
}, {
name : 'TEXT'
}])
});

  当用户输入2个字符时,加载store,调用后台,在后台可以取得用户输入内容。 ("userinput"),在后台处理的时候以用户输入为参数,得到想要的store内容。

可以添加 beforquery 函数看下

	  listeners:{
                    beforequery:function(qe){
                         var para = qe.query ;
                    }
              }

 chrome中断点调试

在源码中发现:

doQuery : function(q, forceAll){
q = Ext.isEmpty(q) ? '' : q;
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel:false
};
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars)){
if(this.lastQuery !== q){
this.lastQuery = q;
if(this.mode == 'local'){
this.selectedIndex = -1;
if(forceAll){
this.store.clearFilter();
}else{
this.store.filter(this.displayField, q);
}
this.onLoad();
}else{
this.store.baseParams[this.queryParam] = q; //q 为用户输入内容
this.store.load({
params: this.getParams(q) // 此处加载了store
});
this.expand();
}
}else{
this.selectedIndex = -1;
this.onLoad();
}
}
},

  

combobox的定义:

var search = new Ext.form.ComboBox({
mode : 'remote',//远程数据
// typeAhead : true,
// typeAheadDelay:300,
triggerAction: 'all',
minChars:2,
store : ds,
editable:true,
queryParam: 'userinput',
// autoLoad:true,
// lastQuery:'',
// loadingText : 'Searching...',
width : 300,
//editable:true,
//lastQuery: '',
hideTrigger: true,
//typeAheadDelay: 100,
displayField : 'SHOWNAME',
valueField : 'VALUE',
fieldLabel : '类型', listeners:{
                    beforequery:function(qe){
                        var para = qe.query ;  // 
                    }
              }
});

  

Extjs combobox 实现搜索框的效果的更多相关文章

  1. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  2. extjs在窗体中添加搜索框

    在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({            store : this.store ...

  3. CSS3实现的苹果网站搜索框效果

    在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.

  4. easyui 设置一加载,搜索框立即弹出的效果

    1.部分html文件 <div id="searchForm" region="north" title="标的查询" collaps ...

  5. ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug

    前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...

  6. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  7. Extjs 中combobox下拉框初始化赋值

    近日在工作中遇到一个需求,要求页面初始化的时候给dataGrid表插入一条数据. 前端使用的是Extjs框架,dataGrid表有四列,其中三列是类型为textbox,普通文本框,另外一列类型是com ...

  8. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  9. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

随机推荐

  1. Win10怎么打开或关闭自动维护功能

  2. @@identity、scope_identity()、IDENT_CURRENT('tablename')函数的区别

    @@IDENTITY 和SCOPE_IDENTITY 返回在当前会话中的任何表内所生成的最后一个标识值.但是,SCOPE_IDENTITY 只返回插入到当前作用域中的值:@@IDENTITY 不受限于 ...

  3. MongoDB 将Json数据直接写入MongoDB的方法

    Json转Bson MongoDB中是以Bson数据格式进行存储的,Json字符串没有办法直接写入MongoDB 可以将Json字符串转换成DBObject或者Document,然后写入MongoDB ...

  4. 折腾gcc/g++链接时.o文件及库的顺序问题(转)

    转自: http://www.cnblogs.com/OCaml/archive/2012/06/18/2554086.html#sec-1-1 折腾gcc/g++链接时.o文件及库的顺序问题 Tab ...

  5. [转载]ecmall语言包程序

    [转载]ecmall语言包程序 (-- ::) 转载▼ 标签: 转载 收藏了 原文地址:ecmall语言包程序作者:我思故我在 执行顺序 登陆后台后 最先执行的文件是 default.app.php ...

  6. Apache: You don't have permission to access / on this server

    当我们需要使用Apache配置虚拟主机时,有可能会出现这个问题:Apache: You don't have permission to access / on this server # 同IP不同 ...

  7. datatables 相关文章

    http://blog.csdn.net/zhu_xiao_yuan/article/details/51252300 datatables参数配置详解  http://blog.csdn.net/j ...

  8. Linux编程学习路线

    参考这篇博客 一本书一本书的啃吧,再多撸点项目

  9. hdu6060 RXD and dividing 贪心

    /** 题目:hdu6060 RXD and dividing 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6060 题意:贪心 给定一颗树,n个节点,编 ...

  10. C# mvc中动态压缩文件发送给前端

    前言 帮朋友解决一个C#中发送压缩文件的的问题,因为感觉解释起来更麻烦,就直接用几分钟时间写了个小Demo.本着"走过路过"不错过的原则,也给记录一下. 1.前端代码 非常简单的一 ...