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

//支持bind绑定store
//列表搜索扩展，支持本地查询
//支持树形菜单本地一级菜单查询
Ext.define('ux.form.field.SearchField', {
extend: 'Ext.form.field.Text',
alias: 'widget.uxSearchfield',
defaultBindProperty: 'store',
mixins: ['Ext.util.StoreHolder'],
triggers: {
clear: {
weight: 0,
cls: Ext.baseCSSPrefix + 'form-clear-trigger',
hidden: true,
//清除搜索条件
handler: 'clearValue',
scope: 'this'
},
search: {
weight: 1,
cls: Ext.baseCSSPrefix + 'form-search-trigger',
//查询
handler: 'onSearchClick',
scope: 'this'
}
},
//查询参数
paramName: 'query',
//是否本地查询
isLocal: false,
initComponent: function () {
var me = this,
store = me.store;
me.on({
//添加监听，监听回车键
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
me.onSearchClick();
}
},
//监听内容改变
//在这里监听是为了实现多个搜索控件绑定同一个store时
//界面能够同步
change: function (t, value) {
var clear = t.getTrigger('clear');
//根据查询条件是否存在，显示隐藏小按钮
if (value.length > 0) {
if (clear.hidden) {
clear.show();
t.updateLayout();
}
} else {
clear.hide();
t.updateLayout();
me.onClearClick();
}
}
});
//如果strong是string类型，寻找对应的store
if (Ext.isString(store)) {
store = me.store = Ext.data.StoreManager.lookup(store);
}
//动态绑定store
me.bindStore(store || 'ext-empty-store', true);
me.callParent(arguments);
},
//清除value
clearValue: function () {
this.setValue('');
},
//清除过滤
onClearClick: function () {
//console.log('清除过滤');
var me = this,
activeFilter = me.activeFilter;
if (activeFilter) {
me.store.getFilters().remove(activeFilter);
me.activeFilter = null;
} else {
me.store.clearFilter(false);
}
},
//本地过滤
localFilter: function (value) {
var store = this.store,
paramName = this.paramName;

//first clear any current filters on the store. If there is a new value, then suppress the refresh event
store.clearFilter(!!value);
//check if a value is set first, as if it isnt we dont have to do anything
//the user could have entered spaces, so we must split them so we can loop through them all
var searches = value.split(','),
regexps = [],
i, regex;

//loop them all
for (i = 0; i < searches.length; i++) {
//if it is nothing, continue
if (!searches[i]) continue;

regex = searches[i].trim();
regex = regex.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

//if found, create a new regular expression which is case insenstive
regexps.push(new RegExp(regex.trim(), 'i'));
}

//now filter the store by passing a method
//the passed method will be called for each record in the store
store.filter(function (record) {
//树形菜单只过滤第一层
if (record.get('depth') > 1) {
return true;
}
var matched = [];

//loop through each of the regular expressions
for (i = 0; i < regexps.length; i++) {
var search = regexps[i],
didMatch = search.test(record.get(paramName));

//if it matched the first or last name, push it into the matches array
matched.push(didMatch);
}

return (regexps.length && matched.indexOf(true) !== -1);
});
},
//过滤
onSearchClick: function () {
var me = this,
value = me.getValue(),
store,
proxy;
if (value.length > 0) {
//本地还是远程过滤
if (!me.isLocal) {
store = me.store;
store.setRemoteFilter(true);
// 设置代理，设置过滤参数
proxy = store.getProxy();
proxy.setFilterParam(me.paramName);
proxy.encodeFilters = function (filters) {
return filters[0].getValue();
}
// Param name is ignored here since we use custom encoding in the proxy.
// id is used by the Store to replace any previous filter
me.activeFilter = new Ext.util.Filter({
property: me.paramName,
value: value
});
me.store.getFilters().add(me.activeFilter);
} else {
me.localFilter(value);
}
}
},
onDestroy: function () {
//清除过滤条件
var me = this,
store = me.store;
if (store) {
me.onClearClick();
me.store = null;
//移除绑定
me.bindStore(null);
}
me.callParent();
}
});

Ext.define('类名', {
extend: 'Ext.tree.Panel',
title: '小区',
rootVisible : false,
store: '数据源，可bind绑定',
header: {
items: [{
//本地查询
isLocal:true,
xtype: 'uxSearchfield',
//
store: '数据源，可bind绑定',
//
paramName: '查询字段',
emptyText: '请输入关键词'
}]
}
});