Ext 下拉列表模糊搜索
/**
* Created by huangbaidong on 2016/9/18.
* 楼盘通用Combo组件,支持模糊查询
* 使用案例:
* {
fieldLabel : '楼盘名称',
xtype: 'residentialAreaCombo',
name : 'buildingId',
queryParams:{
orgId:top.loginUser.orgId
}
}
*/
Ext.define('app.component.biz.house.ResidentialAreaCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.residentialAreaCombo',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
listConfig: {
maxHeight:200,
itemTpl: new Ext.XTemplate('{name} ')
},
constructor : function(config) {
Ext.apply(config, {
store: Ext.create('app.component.biz.house.ResidentialAreaStore', {
queryParams : config.queryParams
})
});
app.component.biz.house.ResidentialAreaCombo.superclass.constructor.call(this, config);
},
listeners:{
change : function(combo, record, eOpts) {
if(this.callback) {
if(combo.lastSelection && combo.lastSelection.length>0) {
this.callback(combo.lastSelection[0]);
}
}
},
beforequery : function(e) {
var combo = e.combo;
combo.collapse();//收起
var value = combo.getValue();
if (!e.forceAll) {//如果不是通过选择,而是文本框录入
combo.store.clearFilter();
combo.store.filterBy(function(record, id) {
var text = record.get(combo.displayField);
// 用自己的过滤规则,如写正则式
return (text.indexOf(value) != -1);
});
combo.onLoad();//不加第一次会显示不出来
combo.expand();
return false;
}
if(!value) {
//如果文本框没值,清除过滤器
combo.store.clearFilter();
}
}
} });
/**
* Created by huangbaidong on 2016/9/18.
* 楼盘组件通用Store,
*/
Ext.define('app.component.biz.house.ResidentialAreaStore', {
extend: 'Ext.data.Store',
autoLoad : true,
constructor : function(config) {
Ext.apply(config, {
/*data:(function(){
var array = [];
Ext.each(top.productStore.getData().items, function(item) {
if(item.data.orgId == config.filterParams.orgId) {
array.push(item);
}
})
return array;
})()*/
proxy: {
type: 'ajax',
url: '../CstResidentialArea/queryAll',
reader: {
type: 'json',
rootProperty: 'datas',
totalProperty: 'total'
},
extraParams: config.filterParams
}
});
app.component.biz.house.ResidentialAreaStore.superclass.constructor.call(this, config);
}
});
Ext 下拉列表模糊搜索的更多相关文章
- 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect
在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...
- Ext的异步请求(二级级联动态加载下拉列表)
页面: <tr> <td class="label" width="300" >作业计划项模板</td> <td> ...
- [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- EXt form属性
配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包 ...
- Ext.form.ComboBox 后台取值 动态加载 ext5.0.0
我用的extjs是5.0.0版本的. 请注意:如果这里没有的combobox相关内容,这里一定有. 开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用.最后大神出手帮忙 ...
- Ext 初级UI设计
Ext.Button 说明:该组件代替了传统submit,reset,buuton HTML控件构造参数: text: 按钮上的名称 handler:指定一个函数句柄,在默认事件触发时调用,此时的默认 ...
随机推荐
- yourphp数据库介绍
yt_attachment 编辑器图片上传存放的表
- ecshop去头部和掉底部版权
1.去掉头部版权 打开includes/lib_main.php $page_title = $GLOBALS['_CFG']['shop_title'] . ' - ' . 'Powered by ...
- Lua 之 userdata
Lua 之 userdata 在Lua中可以通过自定义类型(user data)与C语言代码更高效.更灵活的交互,从而扩展Lua能够表达的类型. full userdata full userdata ...
- Python基础之【第一篇】
Python简介: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...
- Java多线程编程核心技术--Lock的使用(一)
使用ReentrantLock类 在Java多线程中,可以使用synchronized关键字来实现线程之间的同步互斥,但在JDK1.5中新增加了ReentrantLock类也能达到同样的效果,并且在扩 ...
- singleton和prototype
public class testScope { @Test public void test() { //默任singleton ApplicationContext ctx= new ClassP ...
- Storm:最火的流式处理框架
伴随着信息科技日新月异的发展,信息呈现出爆发式的膨胀,人们获取信息的途径也更加多样.更加便捷,同时对于信息的时效性要求也越来越高.举个搜索场景中的例子,当一个卖家发布了一条宝贝信息时,他希望的当然是这 ...
- android自定义控件(1)-点击实现开关按钮切换
自定义控件的步骤.用到的主要方法: 1.首先需要定义一个类,继承自View:对于继承View的类,会需要实现至少一个构造方法:实际上这里一共有三个构造方法: public View (Contex ...
- 今天是JQ 的slideUp 和 slideDown 的点击事件
先贴代码,再讲详细事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- ubuntu系统下使用锐捷上网的方法——特快
1.点击右上方的有线连接: 2.点击编辑连接: 3.选择802.x的安全性分页: 4.勾选下面的单选框: 5.输入登陆账号(通常就是学号),密码(通常是身份证后六位),如果出现了一个“解锁密码环”的对 ...