3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
15 Ext.Loader.setConfig({enabled: true});
16 Ext.Loader.setPath('Ext.ux', '../ux');
20 'Ext.ux.grid.FiltersFeature',
24 Ext.define('Product', {
25 extend: 'Ext.data.Model',
46 Ext.onReady(function(){
50 // for this demo configure local and remote urls for demo purposes
52 local: 'grid-filter.json', // static data file
53 remote: 'grid-filter.php'
56 // configure whether filter query is encoded or not (initially)
59 // configure whether filtering is performed locally or remotely (initially)
62 var store = Ext.create('Ext.data.JsonStore', {
68 url: (local ? url.local : url.remote),
73 totalProperty: 'total'
86 // encode and local configuration options defined previously for easier reuse
87 encode: encode, // json encode the filter query
88 local: local, // defaults to false (remote filtering)
90 // Filters are most naturally placed in the column definition, but can also be
100 // use a factory method to reduce code while demonstrating
101 // that the GridFilter plugin may be configured with or without
102 // the filter types (the filters may be specified on the column model
103 var createColumns = function (finish, start) {
108 // instead of specifying filter config just specify filterable=true
109 // to use store's field's type property (if type property not
110 // explicitly specified in store config it will be 'auto' which
111 // GridFilters will assume to be 'StringFilter'
114 //,filter: {type: 'numeric'}
116 dataIndex: 'company',
122 // specify disabled to disable the filter menu
129 //type: 'numeric' // specify type here or in store fields config
137 options: ['small', 'medium', 'large', 'extra large']
144 renderer: Ext.util.Format.dateRenderer('m/d/Y')
146 dataIndex: 'visible',
148 // this column's filter is defined in the filters feature config
151 return columns.slice(start || 0, finish);
154 var grid = Ext.create('Ext.grid.Panel', {
157 columns: createColumns(4),
160 dockedItems: [Ext.create('Ext.toolbar.Paging', {
166 // add some buttons to bottom toolbar just for demonstration purposes
167 grid.child('pagingtoolbar').add([
170 text: 'Encode: ' + (encode ? 'On' : 'Off'),
171 tooltip: 'Toggle Filter encoding on/off',
173 handler: function (button, state) {
174 var encode = (grid.filters.encode !== true);
175 var text = 'Encode: ' + (encode ? 'On' : 'Off');
176 grid.filters.encode = encode;
177 grid.filters.reload();
178 button.setText(text);
182 text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
183 tooltip: 'Toggle Filtering between remote/local',
185 handler: function (button, state) {
186 var local = (grid.filters.local !== true),
187 text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
188 newUrl = local ? url.local : url.remote,
189 store = grid.view.getStore();
191 // update the GridFilter setting
192 grid.filters.local = local;
193 // bind the store again so GridFilters is listening to appropriate store event
194 grid.filters.bindStore(store);
195 // update the url for the proxy
196 store.proxy.url = newUrl;
198 button.setText(text);
203 text: 'All Filter Data',
204 tooltip: 'Get Filter Data for Grid',
205 handler: function () {
206 var data = Ext.encode(grid.filters.getFilterData());
207 Ext.Msg.alert('All Filter Data',data);
210 text: 'Clear Filter Data',
211 handler: function () {
212 grid.filters.clearFilters();
216 handler: function () {
217 if (grid.headerCt.items.length < 6) {
218 grid.headerCt.add(createColumns(6, 4));
226 var win = Ext.create('Ext.Window', {
227 title: 'Grid Filters Example',