ux.form.field.SearchField 列表、树形菜单查询扩展
生活随笔
收集整理的這篇文章主要介紹了
ux.form.field.SearchField 列表、树形菜单查询扩展
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 列表、树形菜单查询扩展的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英雄联盟灵能特工维克托特效怎么样
- 下一篇： ux.form.field.Verify