1. //支持bind绑定store
  2. //列表搜索扩展,支持本地查询
  3. //支持树形菜单本地一级菜单查询
  4. Ext.define('ux.form.field.SearchField', {
  5. extend: 'Ext.form.field.Text',
  6. alias: 'widget.uxSearchfield',
  7. defaultBindProperty: 'store',
  8. mixins: ['Ext.util.StoreHolder'],
  9. triggers: {
  10. clear: {
  11. weight: 0,
  12. cls: Ext.baseCSSPrefix + 'form-clear-trigger',
  13. hidden: true,
  14. //清除搜索条件
  15. handler: 'clearValue',
  16. scope: 'this'
  17. },
  18. search: {
  19. weight: 1,
  20. cls: Ext.baseCSSPrefix + 'form-search-trigger',
  21. //查询
  22. handler: 'onSearchClick',
  23. scope: 'this'
  24. }
  25. },
  26. //查询参数
  27. paramName: 'query',
  28. //是否本地查询
  29. isLocal: false,
  30. initComponent: function () {
  31. var me = this,
  32. store = me.store;
  33. me.on({
  34. //添加监听,监听回车键
  35. specialkey: function (f, e) {
  36. if (e.getKey() == e.ENTER) {
  37. me.onSearchClick();
  38. }
  39. },
  40. //监听内容改变
  41. //在这里监听是为了实现多个搜索控件绑定同一个store时
  42. //界面能够同步
  43. change: function (t, value) {
  44. var clear = t.getTrigger('clear');
  45. //根据查询条件是否存在,显示隐藏小按钮
  46. if (value.length > 0) {
  47. if (clear.hidden) {
  48. clear.show();
  49. t.updateLayout();
  50. }
  51. } else {
  52. clear.hide();
  53. t.updateLayout();
  54. me.onClearClick();
  55. }
  56. }
  57. });
  58. //如果strong是string类型,寻找对应的store
  59. if (Ext.isString(store)) {
  60. store = me.store = Ext.data.StoreManager.lookup(store);
  61. }
  62. //动态绑定store
  63. me.bindStore(store || 'ext-empty-store', true);
  64. me.callParent(arguments);
  65. },
  66. //清除value
  67. clearValue: function () {
  68. this.setValue('');
  69. },
  70. //清除过滤
  71. onClearClick: function () {
  72. //console.log('清除过滤');
  73. var me = this,
  74. activeFilter = me.activeFilter;
  75. if (activeFilter) {
  76. me.store.getFilters().remove(activeFilter);
  77. me.activeFilter = null;
  78. } else {
  79. me.store.clearFilter(false);
  80. }
  81. },
  82. //本地过滤
  83. localFilter: function (value) {
  84. var store = this.store,
  85. paramName = this.paramName;
  86.  
  87. //first clear any current filters on the store. If there is a new value, then suppress the refresh event
  88. store.clearFilter(!!value);
  89. //check if a value is set first, as if it isnt we dont have to do anything
  90. //the user could have entered spaces, so we must split them so we can loop through them all
  91. var searches = value.split(','),
  92. regexps = [],
  93. i, regex;
  94.  
  95. //loop them all
  96. for (i = 0; i < searches.length; i++) {
  97. //if it is nothing, continue
  98. if (!searches[i]) continue;
  99.  
  100. regex = searches[i].trim();
  101. regex = regex.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
  102.  
  103. //if found, create a new regular expression which is case insenstive
  104. regexps.push(new RegExp(regex.trim(), 'i'));
  105. }
  106.  
  107. //now filter the store by passing a method
  108. //the passed method will be called for each record in the store
  109. store.filter(function (record) {
  110. //树形菜单只过滤第一层
  111. if (record.get('depth') > 1) {
  112. return true;
  113. }
  114. var matched = [];
  115.  
  116. //loop through each of the regular expressions
  117. for (i = 0; i < regexps.length; i++) {
  118. var search = regexps[i],
  119. didMatch = search.test(record.get(paramName));
  120.  
  121. //if it matched the first or last name, push it into the matches array
  122. matched.push(didMatch);
  123. }
  124.  
  125. return (regexps.length && matched.indexOf(true) !== -1);
  126. });
  127. },
  128. //过滤
  129. onSearchClick: function () {
  130. var me = this,
  131. value = me.getValue(),
  132. store,
  133. proxy;
  134. if (value.length > 0) {
  135. //本地还是远程过滤
  136. if (!me.isLocal) {
  137. store = me.store;
  138. store.setRemoteFilter(true);
  139. // 设置代理,设置过滤参数
  140. proxy = store.getProxy();
  141. proxy.setFilterParam(me.paramName);
  142. proxy.encodeFilters = function (filters) {
  143. return filters[0].getValue();
  144. }
  145. // Param name is ignored here since we use custom encoding in the proxy.
  146. // id is used by the Store to replace any previous filter
  147. me.activeFilter = new Ext.util.Filter({
  148. property: me.paramName,
  149. value: value
  150. });
  151. me.store.getFilters().add(me.activeFilter);
  152. } else {
  153. me.localFilter(value);
  154. }
  155. }
  156. },
  157. onDestroy: function () {
  158. //清除过滤条件
  159. var me = this,
  160. store = me.store;
  161. if (store) {
  162. me.onClearClick();
  163. me.store = null;
  164. //移除绑定
  165. me.bindStore(null);
  166. }
  167. me.callParent();
  168. }
  169. });

简单示例

  1. Ext.define('类名', {
  2. extend: 'Ext.tree.Panel',
  3. title: '小区',
  4. rootVisible : false,
  5. store: '数据源,可bind绑定',
  6. header: {
  7. items: [{
  8. //本地查询
  9. isLocal:true,
  10. xtype: 'uxSearchfield',
  11. //
  12. store: '数据源,可bind绑定',
  13. //
  14. paramName: '查询字段',
  15. emptyText: '请输入关键词'
  16. }]
  17. }
  18. });

ux.form.field.SearchField 列表、树形菜单查询扩展的更多相关文章

  1. ux.form.field.KindEditor 所见所得编辑器

    注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...

  2. ux.form.field.Verify 验证码控件

    //验证码控件 Ext.define('ux.form.field.Verify', { extend: 'Ext.container.Container', alias: ['widget.fiel ...

  3. ux.form.field.TreePicker 扩展,修复火狐不能展开bug

    /** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态 ...

  4. ux.form.field.Year 只能选年的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 //只选择年的控件 Ext.define('ux.picker.Year', { extend: 'Ext.Component', alias: ...

  5. ux.form.field.Month 只能选年、月的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 //月弹窗扩展 //只选月 Ext.define('ux.picker.Month', { extend: 'Ext.picker.Month', ...

  6. ux.form.field.Password 密码与非密码状态切换

    效果如图: 扩展源码: //扩展 //密码按钮扩展 //支持在密码与非密码之间切换 Ext.define('ux.form.field.Password', { extend: 'Ext.form.f ...

  7. ux.form.field.GridDate 支持快速选择日期的日期控件

    效果如图,亲测6.2.1版本可用 /** *支持快速选择日期的日期控件 */ Ext.define('ux.form.field.GridDate', { extend: 'Ext.form.fiel ...

  8. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  9. 如何快速开发树形列表和分页查询整合的WInform程序界面

    我在做Winform界面的时候,一般都是统一化处理,界面顶部放置一些字段条件供查询,下面就是分页查询列表,展示相关的数据.但有时候碰到一些表字段内容分类比较多,有一些特别重要,如果放在一个树形列表来进 ...

随机推荐

  1. java包装类的作用

    转载自http://zhidao.baidu.com/question/2052192149152534987.html 第一,基本数据类型之间的相互转换不是都可以制动转换的,而你强制转换又会出问题, ...

  2. Atitit.如何选择技术职业方向

    Atitit.如何选择技术职业方向 1. 原则是应该如下的应该从以下指标判断1 1.1. 技术的长寿性(长生命周期1 1.2. 技术的普适性(市场份额)1 1.3. **属于open体系还是封闭体系? ...

  3. bundle与package区别与联系

    转:http://blog.csdn.net/lmbda/article/details/17895619 bundle是Apple提供的软件安装的便捷方法. bundle为用户和开发者提供了一个简单 ...

  4. iOS开发-UITableView顶部图片下拉放大

    关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...

  5. javaweb学习总结(十八)——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  6. Maven学习总结(八)——使用Maven构建多模块项目

    在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为domain(域模型层).dao(数据库访问层).service(业务逻辑层).web(表现层),这样分层之 ...

  7. I2S (Inter—IC Sound) 总线

    I2S I2S(Inter—IC Sound)总线, 又称 集成电路内置音频总线,是飞利浦公司为数字音频设备之间的音频数据传输而制定的一种总线标准,该总线专责于音频设备之间的数据传输,广泛应用于各种多 ...

  8. old header

    海纳百川 山不拒土 No Backspace in Real Life. Love Life![Cloud][LBS][GIS][GPS][MAPS][C++][Java]

  9. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

  10. 进程、线程、轻量级进程、协程与 go 的 goroutine【转载+整理】

    本文内容 进程 线程 协程 Go 中的 goroutine 参考资料 最近,看一些文章,提到"协程"的概念,心想,进程,线程,协程,前两个很容易,任何一本关于操作系统的书都有说,开 ...