SearchField.html
2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js">Ext.define('Ext.ux.form.SearchField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.searchfield',
trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
hasSearch : false,
paramName : 'query',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.on('specialkey', function(f, e){
if (e.getKey() == e.ENTER) {
me.onTrigger2Click();
}
});
// We're going to use filtering
me.store.remoteFilter = true;
// Set up the proxy to encode the filter in the simplest way as a name/value pair
// If the Store has not been *configured* with a filterParam property, then use our filter parameter name
if (!me.store.proxy.hasOwnProperty('filterParam')) {
me.store.proxy.filterParam = me.paramName;
}
me.store.proxy.encodeFilters = function(filters) {
return filters[0].value;
}
},
afterRender: function(){
this.callParent();
this.triggerCell.item(0).setDisplayed(false);
},
onTrigger1Click : function(){
var me = this;
if (me.hasSearch) {
me.setValue('');
me.store.clearFilter();
me.hasSearch = false;
me.triggerCell.item(0).setDisplayed(false);
me.updateLayout();
}
},
onTrigger2Click : function(){
var me = this,
value = me.getValue();
if (value.length > 0) {
// 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.store.filter({
id: me.paramName,
property: me.paramName,
value: value
});
me.hasSearch = true;
me.triggerCell.item(0).setDisplayed(true);
me.updateLayout();
}
}
});</pre>
</body>
</html>