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             //,filter: {type: 'numeric'}
 102         }, {
 103             dataIndex: 'company',
 104             text: 'Company',
 105             id: 'company',
 106             flex: 1,
 107             filter: {
 108                 type: 'string'
 109                 // specify disabled to disable the filter menu
 110                 //, disabled: true
 111             }
 112         }, {
 113             dataIndex: 'price',
 114             text: 'Price',
 115             filter: {
 116                 //type: 'numeric'  // specify type here or in store fields config
 117             }
 118         }, {
 119             dataIndex: 'size',
 120             text: 'Size',
 121             filter: {
 122                 type: 'list',
 123                 options: ['small', 'medium', 'large', 'extra large']
 124                 //,phpMode: true
 125             }
 126         }, {
 127             dataIndex: 'date',
 128             text: 'Date',
 129             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 130             filter: {
 131                 //type: 'date'     // specify type here or in store fields config
 132             }
 133         }, {
 134             dataIndex: 'visible',
 135             text: 'Visible',
 136             filter: {
 137                 //type: 'boolean'  // specify type here or in store fields config
 138             }
 139         }];
 140
 141         return columns.slice(start || 0, finish);
 142     };
 143
 144     var grid = Ext.create('Ext.grid.Panel', {
 145         border: false,
 146         store: store,
 147         columns: createHeaders(4),
 148         loadMask: true,
 149         features: [filters],
 150         bbar: Ext.create('Ext.toolbar.Paging', {
 151             store: store
 152         })
 153     });
 154
 155     // add some buttons to bottom toolbar just for demonstration purposes
 156     grid.child('[dock=bottom]').add([
 157         '->',
 158         {
 159             text: 'Encode: ' + (encode ? 'On' : 'Off'),
 160             tooltip: 'Toggle Filter encoding on/off',
 161             enableToggle: true,
 162             handler: function (button, state) {
 163                 var encode = (grid.filters.encode !== true);
 164                 var text = 'Encode: ' + (encode ? 'On' : 'Off');
 165                 grid.filters.encode = encode;
 166                 grid.filters.reload();
 167                 button.setText(text);
 168             }
 169         },
 170         {
 171             text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
 172             tooltip: 'Toggle Filtering between remote/local',
 173             enableToggle: true,
 174             handler: function (button, state) {
 175                 var local = (grid.filters.local !== true),
 176                     text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
 177                     newUrl = local ? url.local : url.remote,
 178                     store = grid.view.getStore();
 179
 180                 // update the GridFilter setting
 181                 grid.filters.local = local;
 182                 // bind the store again so GridFilters is listening to appropriate store event
 183                 grid.filters.bindStore(store);
 184                 // update the url for the proxy
 185                 store.proxy.url = newUrl;
 186
 187                 button.setText(text);
 188                 store.load();
 189             }
 190         },
 191         {
 192             text: 'All Filter Data',
 193             tooltip: 'Get Filter Data for Grid',
 194             handler: function () {
 195                 var data = Ext.encode(grid.filters.getFilterData());
 196                 Ext.Msg.alert('All Filter Data',data);
 197             }
 198         },{
 199             text: 'Clear Filter Data',
 200             handler: function () {
 201                 grid.filters.clearFilters();
 202             }
 203         },{
 204             text: 'Add Columns',
 205             handler: function () {
 206                 if (grid.headerCt.items.length < 6) {
 207                     grid.headerCt.add(createHeaders(6, 4));
 208                     grid.view.refresh();
 209                     this.disable();
 210                 }
 211             }
 212         }
 213     ]);
 214
 215     var win = Ext.create('Ext.Window', {
 216         title: 'Grid Filters Example',
 217         height: 400,
 218         width: 700,
 219         layout: 'fit',
 220         items: grid
 221     }).show();
 222
 223     store.load();
 224 });