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. Twitter API升级至1.1

    Twitter API 1.1是至今最大的一次升级,从3月份提出,到6月11日1.0版本已经全面停止调用.关于1.1版本升级特性可访问: https://dev.twitter.com/docs/ap ...

  2. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  3. JavaScript 闯关记

    DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...

  4. centos安装firefox flash插件

    centos下的firefox flash插件默认不是最新版的,安装过程如下: 将安装地址添加到repolist中 sudo yum -y install http://linuxdownload.a ...

  5. 修改Android签名证书keystore的密码、别名alias以及别名密码

    Eclipse ADT的Custom debug keystore自定义调试证书的时候,Android应用开发接入各种SDK时会发现,有很多SDK是需要靠package name和keystore的指 ...

  6. javaweb学习总结(二十七)——jsp简单标签开发案例和打包

    一.开发标签库 1.1.开发防盗链标签 1.编写标签处理器类:RefererTag.java 1 package me.gacl.web.simpletag; 2 3 import java.io.I ...

  7. javaweb学习总结(十)——HttpServletRequest对象(一)

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  8. Maven学习总结(四)——Maven核心概念--转载

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  9. phpweb成品网站最新版(注入、上传、写shell)

    注入:之所以鸡肋就是该漏洞利用安装文件 重新生成 配置文件 写入可执行代码 鸡肋1: 具有破坏性 动作非常大 重新写了配置文件 数据库连接文件鸡肋2: 有一定安全常识的站长都会删掉 install 目 ...

  10. Asp.Net customErrors与httpErrors的区别

    先看一下简单的对比 customErrors Asp.Net级别的错误处理程序,只处理Asp.Net应用抛出的异常(404,403,500..) 在IIS7+的服务器依然可用(IIS7之前就引进了) ...