3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
\r
9 Ext.QuickTips.init();
\r
11 // for this demo configure local and remote urls for demo purposes
\r
13 local: 'grid-filter.json', // static data file
\r
14 remote: 'grid-filter.php'
\r
17 // configure whether filter query is encoded or not (initially)
\r
20 // configure whether filtering is performed locally or remotely (initially)
\r
23 store = new Ext.data.JsonStore({
\r
26 url: (local ? url.local : url.remote),
\r
37 totalProperty: 'total',
\r
48 dateFormat: 'Y-m-d H:i:s'
\r
57 var filters = new Ext.ux.grid.GridFilters({
\r
58 // encode and local configuration options defined previously for easier reuse
\r
59 encode: encode, // json encode the filter query
\r
60 local: local, // defaults to false (remote filtering)
\r
66 dataIndex: 'company',
\r
77 options: ['small', 'medium', 'large', 'extra large'],
\r
81 dataIndex: 'visible'
\r
85 // use a factory method to reduce code while demonstrating
\r
86 // that the GridFilter plugin may be configured with or without
\r
87 // the filter types (the filters may be specified on the column model
\r
88 var createColModel = function (finish, start) {
\r
93 // instead of specifying filter config just specify filterable=true
\r
94 // to use store's field's type property (if type property not
\r
95 // explicitly specified in store config it will be 'auto' which
\r
96 // GridFilters will assume to be 'StringFilter'
\r
98 //,filter: {type: 'numeric'}
\r
100 dataIndex: 'company',
\r
105 // specify disabled to disable the filter menu
\r
109 dataIndex: 'price',
\r
112 //type: 'numeric' // specify type here or in store fields config
\r
119 options: ['small', 'medium', 'large', 'extra large']
\r
125 renderer: Ext.util.Format.dateRenderer('m/d/Y'),
\r
127 //type: 'date' // specify type here or in store fields config
\r
130 dataIndex: 'visible',
\r
133 //type: 'boolean' // specify type here or in store fields config
\r
137 return new Ext.grid.ColumnModel({
\r
138 columns: columns.slice(start || 0, finish),
\r
145 var grid = new Ext.grid.GridPanel({
\r
148 colModel: createColModel(4),
\r
150 plugins: [filters],
\r
151 autoExpandColumn: 'company',
\r
164 bbar: new Ext.PagingToolbar({
\r
171 // add some buttons to bottom toolbar just for demonstration purposes
\r
172 grid.getBottomToolbar().add([
\r
175 text: 'Encode: ' + (encode ? 'On' : 'Off'),
\r
176 tooltip: 'Toggle Filter encoding on/off',
\r
177 enableToggle: true,
\r
178 handler: function (button, state) {
\r
179 var encode = (grid.filters.encode===true) ? false : true;
\r
180 var text = 'Encode: ' + (encode ? 'On' : 'Off');
\r
181 // remove the prior parameters from the last load options
\r
182 grid.filters.cleanParams(grid.getStore().lastOptions.params);
\r
183 grid.filters.encode = encode;
\r
184 button.setText(text);
\r
185 grid.getStore().reload();
\r
188 text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
\r
189 tooltip: 'Toggle Filtering between remote/local',
\r
190 enableToggle: true,
\r
191 handler: function (button, state) {
\r
192 var local = (grid.filters.local===true) ? false : true;
\r
193 var text = 'Local Filtering: ' + (local ? 'On' : 'Off');
\r
194 var newUrl = local ? url.local : url.remote;
\r
196 // update the GridFilter setting
\r
197 grid.filters.local = local;
\r
198 // bind the store again so GridFilters is listening to appropriate store event
\r
199 grid.filters.bindStore(grid.getStore());
\r
200 // update the url for the proxy
\r
201 grid.getStore().proxy.setApi('read', newUrl);
\r
203 button.setText(text);
\r
204 grid.getStore().reload();
\r
207 text: 'All Filter Data',
\r
208 tooltip: 'Get Filter Data for Grid',
\r
209 handler: function () {
\r
210 var data = Ext.encode(grid.filters.getFilterData());
\r
211 Ext.Msg.alert('All Filter Data',data);
\r
214 text: 'Clear Filter Data',
\r
215 handler: function () {
\r
216 grid.filters.clearFilters();
\r
219 text: 'Reconfigure Grid',
\r
220 handler: function () {
\r
221 grid.reconfigure(store, createColModel(6));
\r
226 var win = new Ext.Window({
\r
227 title: 'Grid Filters Example',
\r