ux.form.field.SearchField 列表树形菜单查询扩展

Posted 2020-07-26 魔狼再世

  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 });