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

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     Ext.QuickTips.init();
  10
  11     // for this demo configure local and remote urls for demo purposes
  12     var url = {
  13         local:  'grid-filter.json',  // static data file
  14         remote: 'grid-filter.php'
  15     };
  16
  17     // configure whether filter query is encoded or not (initially)
  18     var encode = false;
  19
  20     // configure whether filtering is performed locally or remotely (initially)
  21     var local = true;
  22
  23     store = new Ext.data.JsonStore({
  24         // store configs
  25         autoDestroy: true,
  26         url: (local ? url.local : url.remote),
  27         remoteSort: false,
  28         sortInfo: {
  29             field: 'company',
  30             direction: 'ASC'
  31         },
  32         storeId: 'myStore',
  33
  34         // reader configs
  35         idProperty: 'id',
  36         root: 'data',
  37         totalProperty: 'total',
  38         fields: [{
  39             name: 'id'
  40         }, {
  41             name: 'company'
  42         }, {
  43             name: 'price',
  44             type: 'float'
  45         }, {
  46             name: 'date',
  47             type: 'date',
  48             dateFormat: 'Y-m-d H:i:s'
  49         }, {
  50             name: 'visible',
  51             type: 'boolean'
  52         }, {
  53             name: 'size'
  54         }]
  55     });
  56
  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)
  61         filters: [{
  62             type: 'numeric',
  63             dataIndex: 'id'
  64         }, {
  65             type: 'string',
  66             dataIndex: 'company',
  67             disabled: true
  68         }, {
  69             type: 'numeric',
  70             dataIndex: 'price'
  71         }, {
  72             type: 'date',
  73             dataIndex: 'date'
  74         }, {
  75             type: 'list',
  76             dataIndex: 'size',
  77             options: ['small', 'medium', 'large', 'extra large'],
  78             phpMode: true
  79         }, {
  80             type: 'boolean',
  81             dataIndex: 'visible'
  82         }]
  83     });
  84
  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) {
  89
  90         var columns = [{
  91             dataIndex: 'id',
  92             header: 'Id',
  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'
  97             filterable: true
  98             //,filter: {type: 'numeric'}
  99         }, {
 100             dataIndex: 'company',
 101             header: 'Company',
 102             id: 'company',
 103             filter: {
 104                 type: 'string'
 105                 // specify disabled to disable the filter menu
 106                 //, disabled: true
 107             }
 108         }, {
 109             dataIndex: 'price',
 110             header: 'Price',
 111             filter: {
 112                 //type: 'numeric'  // specify type here or in store fields config
 113             }
 114         }, {
 115             dataIndex: 'size',
 116             header: 'Size',
 117             filter: {
 118                 type: 'list',
 119                 options: ['small', 'medium', 'large', 'extra large']
 120                 //,phpMode: true
 121             }
 122         }, {
 123             dataIndex: 'date',
 124             header: 'Date',
 125             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 126             filter: {
 127                 //type: 'date'     // specify type here or in store fields config
 128             }
 129         }, {
 130             dataIndex: 'visible',
 131             header: 'Visible',
 132             filter: {
 133                 //type: 'boolean'  // specify type here or in store fields config
 134             }
 135         }];
 136
 137         return new Ext.grid.ColumnModel({
 138             columns: columns.slice(start || 0, finish),
 139             defaults: {
 140                 sortable: true
 141             }
 142         });
 143     };
 144
 145     var grid = new Ext.grid.GridPanel({
 146         border: false,
 147         store: store,
 148         colModel: createColModel(4),
 149         loadMask: true,
 150         plugins: [filters],
 151         autoExpandColumn: 'company',
 152         listeners: {
 153             render: {
 154                 fn: function(){
 155                     store.load({
 156                         params: {
 157                             start: 0,
 158                             limit: 50
 159                         }
 160                     });
 161                 }
 162             }
 163         },
 164         bbar: new Ext.PagingToolbar({
 165             store: store,
 166             pageSize: 50,
 167             plugins: [filters]
 168         })
 169     });
 170
 171     // add some buttons to bottom toolbar just for demonstration purposes
 172     grid.getBottomToolbar().add([
 173         '->',
 174         {
 175             text: 'Encode: ' + (encode ? 'On' : 'Off'),
 176             tooltip: 'Toggle Filter encoding on/off',
 177             enableToggle: true,
 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();
 186             }
 187         },{
 188             text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
 189             tooltip: 'Toggle Filtering between remote/local',
 190             enableToggle: true,
 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;
 195
 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);
 202
 203                 button.setText(text);
 204                 grid.getStore().reload();
 205             }
 206         },{
 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);
 212             }
 213         },{
 214             text: 'Clear Filter Data',
 215             handler: function () {
 216                 grid.filters.clearFilters();
 217             }
 218         },{
 219             text: 'Reconfigure Grid',
 220             handler: function () {
 221                 grid.reconfigure(store, createColModel(6));
 222             }
 223         }
 224     ]);
 225
 226     var win = new Ext.Window({
 227         title: 'Grid Filters Example',
 228         height: 400,
 229         width: 700,
 230         layout: 'fit',
 231         items: grid
 232     }).show();
 233
 234 });