/**
* 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 下拉列表模糊搜索的更多相关文章

  1. 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

    在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...

  2. Ext的异步请求(二级级联动态加载下拉列表)

    页面: <tr> <td class="label" width="300" >作业计划项模板</td> <td> ...

  3. [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]

    无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...

  5. 无废话ExtJs 入门教程十一[下拉列表:Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  6. [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  7. EXt form属性

    配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包 ...

  8. Ext.form.ComboBox 后台取值 动态加载 ext5.0.0

    我用的extjs是5.0.0版本的. 请注意:如果这里没有的combobox相关内容,这里一定有. 开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用.最后大神出手帮忙 ...

  9. Ext 初级UI设计

    Ext.Button 说明:该组件代替了传统submit,reset,buuton HTML控件构造参数: text: 按钮上的名称 handler:指定一个函数句柄,在默认事件触发时调用,此时的默认 ...

随机推荐

  1. ecshop变量介绍

    获得商品的信息,get_goods_info($goods_id) 获取前10销量排名,get_top10()

  2. Fragment碎片的创建和动态更新

    Fragment,在平板应用中较为参见,把视图分为两个甚至多个模块. 一,一个简单的fragment 1.创建两个局部文件,用于等待被调用 (1)left_fragment (2)right_frag ...

  3. echo '.SUFFIXES: .cpp' >> ${OUTPUT_FILE}

    当前makefile或shell内支持文件后缀的类型列表,意思是文件支持.cpp结尾的类型,并且将他,输出到OUTPUT_FILE函数. 见网上有人说: “makefile中 .SUFFIXES: . ...

  4. A simple Snippet in ST2

    Reference: http://web-design-weekly.com/2012/07/03/snippets-in-sublime-text-2/ A sample - cofirm (To ...

  5. lua 学习

    尽管所有的脚本语言在特定领域都有自己的一席之地,但在游戏开发的世界里,Python 和 Lua 是非常适合的,因为它们可以直接调用C++的功能. lua最让人惊喜的地方应该是它的执行速度,目前没有任何 ...

  6. freemarker初级教程(一)

    序,freemarker是一个模板引擎 一.好处 MVC分离 易于扩展 分离可视化设计和应用程序逻辑 分离页面设计员和程序员. 处理XML和HTML都可以,可以从文本文件读取 二.

  7. AngularJS API之isXXX()

    Angular中保存了很多的判断方法,可以用来验证对象是否符合某种要求,详细的参考代码样例即可 <html> <head> <meta http-equiv=" ...

  8. HTML Table导出为Excel的方法

    HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...

  9. 删除某一BSC在某一时间段内的数据

    DELETE FROM cdl_raw_do_12501_ztev8_sht_201509 WHERE call_start_time >= STR_TO_DATE( '2015-09-14 2 ...

  10. ElasticSearch 2 (6) - 插件安装Head、Kopf与Bigdesk

    ElasticSearch 2 (6) - 插件安装Head.Kopf与Bigdesk 摘要 安装Elasticsearch插件Head.Kopf与Bigdesk 版本 elasticsearch版本 ...