ux.form.field.SearchField 列表、树形菜单查询扩展
生活随笔
收集整理的這篇文章主要介紹了
ux.form.field.SearchField 列表、树形菜单查询扩展
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 //支持bind綁定store
2 //列表搜索擴(kuò)展，支持本地查詢
3 //支持樹(shù)形菜單本地一級(jí)菜單查詢
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 //查詢參數(shù)
27 paramName: 'query',
28 //是否本地查詢
29 isLocal: false,
30 initComponent: function () {
31 var me = this,
32 store = me.store;
33 me.on({
34 //添加監(jiān)聽(tīng)，監(jiān)聽(tīng)回車(chē)鍵
35 specialkey: function (f, e) {
36 if (e.getKey() == e.ENTER) {
37 me.onSearchClick();
38 }
39 },
40 //監(jiān)聽(tīng)內(nèi)容改變
41 //在這里監(jiān)聽(tīng)是為了實(shí)現(xiàn)多個(gè)搜索控件綁定同一個(gè)store時(shí)
42 //界面能夠同步
43 change: function (t, value) {
44 var clear = t.getTrigger('clear');
45 //根據(jù)查詢條件是否存在，顯示隱藏小按鈕
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類(lèi)型，尋找對(duì)應(yīng)的store
59 if (Ext.isString(store)) {
60 store = me.store = Ext.data.StoreManager.lookup(store);
61 }
62 //動(dòng)態(tài)綁定store
63 me.bindStore(store || 'ext-empty-store', true);
64 me.callParent(arguments);
65 },
66 //清除value
67 clearValue: function () {
68 this.setValue('');
69 },
70 //清除過(guò)濾
71 onClearClick: function () {
72 //console.log('清除過(guò)濾');
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 //本地過(guò)濾
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 //樹(shù)形菜單只過(guò)濾第一層
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 //過(guò)濾
129 onSearchClick: function () {
130 var me = this,
131 value = me.getValue(),
132 store,
133 proxy;
134 if (value.length > 0) {
135 //本地還是遠(yuǎn)程過(guò)濾
136 if (!me.isLocal) {
137 store = me.store;
138 store.setRemoteFilter(true);
139 // 設(shè)置代理，設(shè)置過(guò)濾參數(shù)
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 //清除過(guò)濾條件
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 });
簡(jiǎn)單示例
1 Ext.define('類(lèi)名', { 2 extend: 'Ext.tree.Panel', 3 title: '小區(qū)', 4 rootVisible : false, 5 store: '數(shù)據(jù)源，可bind綁定', 6 header: { 7 items: [{ 8 //本地查詢 9 isLocal:true, 10 xtype: 'uxSearchfield', 11 // 12 store: '數(shù)據(jù)源，可bind綁定', 13 // 14 paramName: '查詢字段', 15 emptyText: '請(qǐng)輸入關(guān)鍵詞' 16 }] 17 } 18 });?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的ux.form.field.SearchField 列表、树形菜单查询扩展的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 英雄联盟灵能特工维克托特效怎么样
- 下一篇： cf皇龙戒指作用介绍 cf皇龙戒指属性详