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

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