Extjs combobox 实现搜索框的效果
目的:使用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 实现搜索框的效果的更多相关文章
- js借助JSONP实现百度搜索框提示效果
主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...
- extjs在窗体中添加搜索框
在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({ store : this.store ...
- CSS3实现的苹果网站搜索框效果
在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.
- easyui 设置一加载,搜索框立即弹出的效果
1.部分html文件 <div id="searchForm" region="north" title="标的查询" collaps ...
- ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug
前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...
- 用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
- Extjs 中combobox下拉框初始化赋值
近日在工作中遇到一个需求,要求页面初始化的时候给dataGrid表插入一条数据. 前端使用的是Extjs框架,dataGrid表有四列,其中三列是类型为textbox,普通文本框,另外一列类型是com ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
随机推荐
- Win10怎么打开或关闭自动维护功能
- @@identity、scope_identity()、IDENT_CURRENT('tablename')函数的区别
@@IDENTITY 和SCOPE_IDENTITY 返回在当前会话中的任何表内所生成的最后一个标识值.但是,SCOPE_IDENTITY 只返回插入到当前作用域中的值:@@IDENTITY 不受限于 ...
- MongoDB 将Json数据直接写入MongoDB的方法
Json转Bson MongoDB中是以Bson数据格式进行存储的,Json字符串没有办法直接写入MongoDB 可以将Json字符串转换成DBObject或者Document,然后写入MongoDB ...
- 折腾gcc/g++链接时.o文件及库的顺序问题(转)
转自: http://www.cnblogs.com/OCaml/archive/2012/06/18/2554086.html#sec-1-1 折腾gcc/g++链接时.o文件及库的顺序问题 Tab ...
- [转载]ecmall语言包程序
[转载]ecmall语言包程序 (-- ::) 转载▼ 标签: 转载 收藏了 原文地址:ecmall语言包程序作者:我思故我在 执行顺序 登陆后台后 最先执行的文件是 default.app.php ...
- Apache: You don't have permission to access / on this server
当我们需要使用Apache配置虚拟主机时,有可能会出现这个问题:Apache: You don't have permission to access / on this server # 同IP不同 ...
- datatables 相关文章
http://blog.csdn.net/zhu_xiao_yuan/article/details/51252300 datatables参数配置详解 http://blog.csdn.net/j ...
- Linux编程学习路线
参考这篇博客 一本书一本书的啃吧,再多撸点项目
- hdu6060 RXD and dividing 贪心
/** 题目:hdu6060 RXD and dividing 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6060 题意:贪心 给定一颗树,n个节点,编 ...
- C# mvc中动态压缩文件发送给前端
前言 帮朋友解决一个C#中发送压缩文件的的问题,因为感觉解释起来更麻烦,就直接用几分钟时间写了个小Demo.本着"走过路过"不错过的原则,也给记录一下. 1.前端代码 非常简单的一 ...