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

   1 Ext.Loader.setConfig({enabled: true});
   2 Ext.Loader.setPath('Ext.ux', '../ux');
   3 Ext.require([
   4     'Ext.grid.*',
   5     'Ext.data.*',
   6     'Ext.ux.grid.FiltersFeature',
   7     'Ext.toolbar.Paging'
   8 ]);
   9
  10 Ext.onReady(function(){
  11
  12     Ext.QuickTips.init();
  13
  14     // for this demo configure local and remote urls for demo purposes
  15     var url = {
  16         local:  'grid-filter.json',  // static data file
  17         remote: 'grid-filter.php'
  18     };
  19
  20     // configure whether filter query is encoded or not (initially)
  21     var encode = false;
  22
  23     // configure whether filtering is performed locally or remotely (initially)
  24     var local = true;
  25
  26     var store = Ext.create('Ext.data.JsonStore', {
  27         // store configs
  28         autoDestroy: true,
  29
  30         proxy: {
  31             type: 'ajax',
  32             url: (local ? url.local : url.remote),
  33             reader: {
  34                 type: 'json',
  35                 root: 'data',
  36                 idProperty: 'id',
  37                 totalProperty: 'total'
  38             }
  39         },
  40
  41         remoteSort: false,
  42         sortInfo: {
  43             field: 'company',
  44             direction: 'ASC'
  45         },
  46         pageSize: 50,
  47         storeId: 'myStore',
  48
  49         fields: [
  50             { name: 'id' },
  51             { name: 'company' },
  52             { name: 'price', type: 'float' },
  53             { name: 'date', type: 'date', dateFormat: 'Y-m-d' },
  54             { name: 'visible', type: 'boolean' },
  55             { name: 'size' }
  56         ]
  57     });
  58
  59     var filters = {
  60         ftype: 'filters',
  61         // encode and local configuration options defined previously for easier reuse
  62         encode: encode, // json encode the filter query
  63         local: local,   // defaults to false (remote filtering)
  64         filters: [{
  65             type: 'numeric',
  66             dataIndex: 'id'
  67         }, {
  68             type: 'string',
  69             dataIndex: 'company',
  70             disabled: true
  71         }, {
  72             type: 'numeric',
  73             dataIndex: 'price'
  74         }, {
  75             type: 'date',
  76             dataIndex: 'date'
  77         }, {
  78             type: 'list',
  79             dataIndex: 'size',
  80             options: ['small', 'medium', 'large', 'extra large'],
  81             phpMode: true
  82         }, {
  83             type: 'boolean',
  84             dataIndex: 'visible'
  85         }]
  86     };
  87
  88     // use a factory method to reduce code while demonstrating
  89     // that the GridFilter plugin may be configured with or without
  90     // the filter types (the filters may be specified on the column model
  91     var createHeaders = function (finish, start) {
  92
  93         var columns = [{
  94             dataIndex: 'id',
  95             text: 'Id',
  96             // instead of specifying filter config just specify filterable=true
  97             // to use store's field's type property (if type property not
  98             // explicitly specified in store config it will be 'auto' which
  99             // GridFilters will assume to be 'StringFilter'
 100             filterable: true,
 101             width: 30
 102             //,filter: {type: 'numeric'}
 103         }, {
 104             dataIndex: 'company',
 105             text: 'Company',
 106             id: 'company',
 107             flex: 1,
 108             filter: {
 109                 type: 'string'
 110                 // specify disabled to disable the filter menu
 111                 //, disabled: true
 112             }
 113         }, {
 114             dataIndex: 'price',
 115             text: 'Price',
 116             filter: {
 117                 //type: 'numeric'  // specify type here or in store fields config
 118             },
 119             width: 70
 120         }, {
 121             dataIndex: 'size',
 122             text: 'Size',
 123             filter: {
 124                 type: 'list',
 125                 options: ['small', 'medium', 'large', 'extra large']
 126                 //,phpMode: true
 127             }
 128         }, {
 129             dataIndex: 'date',
 130             text: 'Date',
 131             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 132             filter: {
 133                 //type: 'date'     // specify type here or in store fields config
 134             }
 135         }, {
 136             dataIndex: 'visible',
 137             text: 'Visible',
 138             filter: {
 139                 //type: 'boolean'  // specify type here or in store fields config
 140             }
 141         }];
 142
 143         return columns.slice(start || 0, finish);
 144     };
 145
 146     var grid = Ext.create('Ext.grid.Panel', {
 147         border: false,
 148         store: store,
 149         columns: createHeaders(4),
 150         loadMask: true,
 151         features: [filters],
 152         bbar: Ext.create('Ext.toolbar.Paging', {
 153             store: store
 154         })
 155     });
 156
 157     // add some buttons to bottom toolbar just for demonstration purposes
 158     grid.child('[dock=bottom]').add([
 159         '->',
 160         {
 161             text: 'Encode: ' + (encode ? 'On' : 'Off'),
 162             tooltip: 'Toggle Filter encoding on/off',
 163             enableToggle: true,
 164             handler: function (button, state) {
 165                 var encode = (grid.filters.encode !== true);
 166                 var text = 'Encode: ' + (encode ? 'On' : 'Off');
 167                 grid.filters.encode = encode;
 168                 grid.filters.reload();
 169                 button.setText(text);
 170             }
 171         },
 172         {
 173             text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
 174             tooltip: 'Toggle Filtering between remote/local',
 175             enableToggle: true,
 176             handler: function (button, state) {
 177                 var local = (grid.filters.local !== true),
 178                     text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
 179                     newUrl = local ? url.local : url.remote,
 180                     store = grid.view.getStore();
 181
 182                 // update the GridFilter setting
 183                 grid.filters.local = local;
 184                 // bind the store again so GridFilters is listening to appropriate store event
 185                 grid.filters.bindStore(store);
 186                 // update the url for the proxy
 187                 store.proxy.url = newUrl;
 188
 189                 button.setText(text);
 190                 store.load();
 191             }
 192         },
 193         {
 194             text: 'All Filter Data',
 195             tooltip: 'Get Filter Data for Grid',
 196             handler: function () {
 197                 var data = Ext.encode(grid.filters.getFilterData());
 198                 Ext.Msg.alert('All Filter Data',data);
 199             }
 200         },{
 201             text: 'Clear Filter Data',
 202             handler: function () {
 203                 grid.filters.clearFilters();
 204             }
 205         },{
 206             text: 'Add Columns',
 207             handler: function () {
 208                 if (grid.headerCt.items.length < 6) {
 209                     grid.headerCt.add(createHeaders(6, 4));
 210                     grid.view.refresh();
 211                     this.disable();
 212                 }
 213             }
 214         }
 215     ]);
 216
 217     var win = Ext.create('Ext.Window', {
 218         title: 'Grid Filters Example',
 219         height: 400,
 220         width: 700,
 221         layout: 'fit',
 222         items: grid
 223     }).show();
 224
 225     store.load();
 226 });