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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<html>
<head>
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js"><div id="cls-Ext.ux.grid.filter.ListFilter"></div>/**
* @class Ext.ux.grid.filter.ListFilter
* @extends Ext.ux.grid.filter.Filter
* <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
* their options the first time they are shown. ListFilter utilizes the
* {@link Ext.ux.menu.ListMenu} component.</p>
* <p>Although not shown here, this class accepts all configuration options
* for {@link Ext.ux.menu.ListMenu}.</p>
*
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
var filters = new Ext.ux.grid.GridFilters({
...
filters: [{
type: 'list',
dataIndex: 'size',
phpMode: true,
// options will be used as data to implicitly creates an ArrayStore
options: ['extra small', 'small', 'medium', 'large', 'extra large']
}]
});
* </code></pre>
*
*/
Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
<div id="cfg-Ext.ux.grid.filter.ListFilter-options"></div>/**
* @cfg {Array} options
* <p><code>data</code> to be used to implicitly create a data store
* to back this list when the data source is <b>local</b>. If the
* data for the list is remote, use the <code>{@link #store}</code>
* config instead.</p>
* <br><p>Each item within the provided array may be in one of the
* following formats:</p>
* <div class="mdetail-params"><ul>
* <li><b>Array</b> :
* <pre><code>
options: [
[11, 'extra small'],
[18, 'small'],
[22, 'medium'],
[35, 'large'],
[44, 'extra large']
]
* </code></pre>
* </li>
* <li><b>Object</b> :
* <pre><code>
labelField: 'name', // override default of 'text'
options: [
{id: 11, name:'extra small'},
{id: 18, name:'small'},
{id: 22, name:'medium'},
{id: 35, name:'large'},
{id: 44, name:'extra large'}
]
* </code></pre>
* </li>
* <li><b>String</b> :
* <pre><code>
* options: ['extra small', 'small', 'medium', 'large', 'extra large']
* </code></pre>
* </li>
*/
<div id="cfg-Ext.ux.grid.filter.ListFilter-phpMode"></div>/**
* @cfg {Boolean} phpMode
* <p>Adjust the format of this filter. Defaults to false.</p>
* <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
* <pre><code>
// phpMode == false (default):
filter[0][data][type] list
filter[0][data][value] value1
filter[0][data][value] value2
filter[0][field] prod
// phpMode == true:
filter[0][data][type] list
filter[0][data][value] value1, value2
filter[0][field] prod
* </code></pre>
* When GridFilters <code>@cfg encode = true</code>:
* <pre><code>
// phpMode == false (default):
filter : [{"type":"list","value":["small","medium"],"field":"size"}]
// phpMode == true:
filter : [{"type":"list","value":"small,medium","field":"size"}]
* </code></pre>
*/
phpMode : false,
<div id="cfg-Ext.ux.grid.filter.ListFilter-store"></div>/**
* @cfg {Ext.data.Store} store
* The {@link Ext.data.Store} this list should use as its data source
* when the data source is <b>remote</b>. If the data for the list
* is local, use the <code>{@link #options}</code> config instead.
*/
/**
* @private
* Template method that is to initialize the filter and install required menu items.
* @param {Object} config
*/
init : function (config) {
this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
// if a menu already existed, do clean up first
if (this.menu){
this.menu.destroy();
}
this.menu = new Ext.ux.menu.ListMenu(config);
this.menu.on('checkchange', this.onCheckChange, this);
},
/**
* @private
* Template method that is to get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
return this.menu.getSelected();
},
/**
* @private
* Template method that is to set the value of the filter.
* @param {Object} value The value to set the filter
*/
setValue : function (value) {
this.menu.setSelected(value);
this.fireEvent('update', this);
},
/**
* @private
* Template method that is to return <tt>true</tt> if the filter
* has enough configuration information to be activated.
* @return {Boolean}
*/
isActivatable : function () {
return this.getValue().length > 0;
},
/**
* @private
* Template method that is to get and return serialized filter data for
* transmission to the server.
* @return {Object/Array} An object or collection of objects containing
* key value pairs representing the current configuration of the filter.
*/
getSerialArgs : function () {
var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
return args;
},
/** @private */
onCheckChange : function(){
this.dt.delay(this.updateBuffer);
},
<div id="method-Ext.ux.grid.filter.ListFilter-validateRecord"></div>/**
* Template method that is to validate the provided Ext.data.Record
* against the filters configuration.
* @param {Ext.data.Record} record The record to validate
* @return {Boolean} true if the record is valid within the bounds
* of the filter, false otherwise.
*/
validateRecord : function (record) {
return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
}
});</pre>
</body>
</html>
|
