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:指定一个函数句柄,在默认事件触发时调用,此时的默认 ...
随机推荐
- __cdecl和__stdcall
MSVC在编译C/C++程序的时候,默认采用__cdecl调用约定来编译.__stdcall是Win32 API函数的默认调用规约. Calling Convention Internal* MSVC ...
- ecshop去掉“云服务中心”或者是“模板堂知识库”
ECSHOP开发中心(www.68ecshop.com)教程介绍一下如何去除后台云服务中心菜单: 打开admin/templates/menu.htm,把415行的 document.getEleme ...
- heartbleed漏洞利用
1. heartbleed漏洞扫描: 2. heartbleed漏洞利用: poc.py 117.52.93.111 貌似没有打到管理员账号密码,可能是管理员没登录,其实,可以写一个自动 ...
- OC-内存管理-基本原理与引用计数器
基本原理 1. 什么是内存管理 移动设备的内存极其有限,每个app所能占用的内存是有限制的 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收一些不需要使用 ...
- 边框(border)边距(margin)和间隙(padding)属性的区别
边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...
- 多线程 GET
iOS中多线程的实现 方案 简介 语言 线程生命周期 使用频率 pthread 一套通用的多线程API 适用于 Unix / Linux / Windows 等系统 跨平台\可移植 使用难度大 C 程 ...
- editplus中使用emmet?
要用emmet生成html类型, 格式是: html:???, 意思是 都是html大类型, 小类型用冒号. 如:html:5, 或者全部都是! 则生成html5的类型文档. emmet是zen co ...
- vim的寄存器和剪贴簿操作?
vim 复制/ 删除 多行? 有确定序号的行: :10,15m20, 10,15co20 没有确定序号的行: ndd, nyy. 其中的n表示, 从当前行开始算起(当前行本身要包含!!!), 向下共删 ...
- PHP利用Curl实现多线程抓取网页和下载文件
PHP 利用 Curl 可以完成各种传送文件操作,比如模拟浏览器发送GET,POST请求等等,然而因为php语言本身不支持多线程,所以开发爬虫程序效率并不高,一般采集 数据可以利用 PHPquery ...
- Unity调试相关
1.LOG处理 将所有LOG信息写入到文件,并设置部分LOG显示到屏幕上,总结成以下脚本,将其挂载在摄像机上即可. using UnityEngine; using System.Collection ...