examples/grid-filtering/grid-filter-local.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({enabled: true});
  16 Ext.Loader.setPath('Ext.ux', '../ux');
  17 Ext.require([
  18     'Ext.grid.*',
  19     'Ext.data.*',
  20     'Ext.ux.grid.FiltersFeature',
  21     'Ext.toolbar.Paging'
  22 ]);
  23
  24 Ext.define('Product', {
  25     extend: 'Ext.data.Model',
  26     fields: [{
  27         name: 'id',
  28         type: 'int'
  29     }, {
  30         name: 'company'
  31     }, {
  32         name: 'price',
  33         type: 'float'
  34     }, {
  35         name: 'date',
  36         type: 'date',
  37         dateFormat: 'Y-m-d'
  38     }, {
  39         name: 'visible',
  40         type: 'boolean'
  41     }, {
  42         name: 'size'
  43     }]
  44 });
  45
  46 Ext.onReady(function(){
  47
  48     Ext.QuickTips.init();
  49
  50     // for this demo configure local and remote urls for demo purposes
  51     var url = {
  52         local:  'grid-filter.json',  // static data file
  53         remote: 'grid-filter.php'
  54     };
  55
  56     // configure whether filter query is encoded or not (initially)
  57     var encode = false;
  58
  59     // configure whether filtering is performed locally or remotely (initially)
  60     var local = true;
  61
  62     var store = Ext.create('Ext.data.JsonStore', {
  63         // store configs
  64         autoDestroy: true,
  65         model: 'Product',
  66         proxy: {
  67             type: 'ajax',
  68             url: (local ? url.local : url.remote),
  69             reader: {
  70                 type: 'json',
  71                 root: 'data',
  72                 idProperty: 'id',
  73                 totalProperty: 'total'
  74             }
  75         },
  76         remoteSort: false,
  77         sorters: [{
  78             property: 'company',
  79             direction: 'ASC'
  80         }],
  81         pageSize: 50
  82     });
  83
  84     var filters = {
  85         ftype: 'filters',
  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)
  89
  90         // Filters are most naturally placed in the column definition, but can also be
  91         // added here.
  92         filters: [
  93             {
  94                 type: 'boolean',
  95                 dataIndex: 'visible'
  96             }
  97         ]
  98     };
  99
 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) {
 104
 105         var columns = [{
 106             dataIndex: 'id',
 107             text: 'Id',
 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'
 112             filterable: true,
 113             width: 30
 114             //,filter: {type: 'numeric'}
 115         }, {
 116             dataIndex: 'company',
 117             text: 'Company',
 118             id: 'company',
 119             flex: 1,
 120             filter: {
 121                 type: 'string'
 122                 // specify disabled to disable the filter menu
 123                 //, disabled: true
 124             }
 125         }, {
 126             dataIndex: 'price',
 127             text: 'Price',
 128             filter: {
 129                 //type: 'numeric'  // specify type here or in store fields config
 130             },
 131             width: 70
 132         }, {
 133             dataIndex: 'size',
 134             text: 'Size',
 135             filter: {
 136                 type: 'list',
 137                 options: ['small', 'medium', 'large', 'extra large']
 138                 //,phpMode: true
 139             }
 140         }, {
 141             dataIndex: 'date',
 142             text: 'Date',
 143             filter: true,
 144             renderer: Ext.util.Format.dateRenderer('m/d/Y')
 145         }, {
 146             dataIndex: 'visible',
 147             text: 'Visible'
 148             // this column's filter is defined in the filters feature config
 149         }];
 150
 151         return columns.slice(start || 0, finish);
 152     };
 153
 154     var grid = Ext.create('Ext.grid.Panel', {
 155         border: false,
 156         store: store,
 157         columns: createColumns(4),
 158         loadMask: true,
 159         features: [filters],
 160         dockedItems: [Ext.create('Ext.toolbar.Paging', {
 161             dock: 'bottom',
 162             store: store
 163         })]
 164     });
 165
 166     // add some buttons to bottom toolbar just for demonstration purposes
 167     grid.child('pagingtoolbar').add([
 168         '->',
 169         {
 170             text: 'Encode: ' + (encode ? 'On' : 'Off'),
 171             tooltip: 'Toggle Filter encoding on/off',
 172             enableToggle: true,
 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);
 179             }
 180         },
 181         {
 182             text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
 183             tooltip: 'Toggle Filtering between remote/local',
 184             enableToggle: true,
 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();
 190
 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;
 197
 198                 button.setText(text);
 199                 store.load();
 200             }
 201         },
 202         {
 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);
 208             }
 209         },{
 210             text: 'Clear Filter Data',
 211             handler: function () {
 212                 grid.filters.clearFilters();
 213             }
 214         },{
 215             text: 'Add Columns',
 216             handler: function () {
 217                 if (grid.headerCt.items.length < 6) {
 218                     grid.headerCt.add(createColumns(6, 4));
 219                     grid.view.refresh();
 220                     this.disable();
 221                 }
 222             }
 223         }
 224     ]);
 225
 226     var win = Ext.create('Ext.Window', {
 227         title: 'Grid Filters Example',
 228         height: 400,
 229         width: 700,
 230         layout: 'fit',
 231         items: grid
 232     }).show();
 233
 234     store.load();
 235 });