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