examples/grid-filtering/grid-filter.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.onReady(function(){\r
  10         Ext.menu.RangeMenu.prototype.icons = {\r
  11           gt: 'img/greater_then.png', \r
  12           lt: 'img/less_then.png',\r
  13           eq: 'img/equals.png'\r
  14         };\r
  15         Ext.grid.filter.StringFilter.prototype.icon = 'img/find.png';\r
  16     \r
  17     // NOTE: This is an example showing simple state management. During development,\r
  18     // it is generally best to disable state management as dynamically-generated ids\r
  19     // can change across page loads, leading to unpredictable results.  The developer\r
  20     // should ensure that stable state ids are set for stateful components in real apps.\r
  21         Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
  22           \r
  23         var ds = new Ext.data.JsonStore({\r
  24           url:'grid-filter.php',\r
  25     id: 'id',\r
  26     totalProperty: 'total',\r
  27     root: 'data',\r
  28     fields: [\r
  29       {name:'id'}, \r
  30       {name:'company'}, \r
  31       {name:'price'}, \r
  32       {name:'date',type: 'date', dateFormat: 'Y-m-d H:i:s'}, \r
  33       {name:'visible'}, \r
  34       {name:'size'}\r
  35     ],\r
  36           sortInfo: {field: 'company', direction: 'ASC'},\r
  37           remoteSort: true\r
  38         });\r
  39   \r
  40         var filters = new Ext.grid.GridFilters({\r
  41           filters:[\r
  42             {type: 'numeric',  dataIndex: 'id'},\r
  43             {type: 'string',  dataIndex: 'company'},\r
  44             {type: 'numeric', dataIndex: 'price'},\r
  45             {type: 'date',  dataIndex: 'date'},\r
  46             {\r
  47               type: 'list',  \r
  48               dataIndex: 'size', \r
  49               options: ['small', 'medium', 'large', 'extra large'],\r
  50               phpMode: true\r
  51             },\r
  52             {type: 'boolean', dataIndex: 'visible'}\r
  53         ]});\r
  54         \r
  55         var cm = new Ext.grid.ColumnModel([\r
  56           {dataIndex: 'id', header: 'Id'},\r
  57           {dataIndex: 'company', header: 'Company', id: 'company'},\r
  58           {dataIndex: 'price', header: 'Price'},\r
  59           {dataIndex: 'date',header: 'Date', renderer: Ext.util.Format.dateRenderer('m/d/Y')}, \r
  60           {dataIndex: 'size', header: 'Size'}, \r
  61           {dataIndex: 'visible',header: 'Visible'}\r
  62         ]);\r
  63         cm.defaultSortable = true;\r
  64         \r
  65         var grid = new Ext.grid.GridPanel({\r
  66           id: 'example',\r
  67           title: 'Grid Filters Example',\r
  68           ds: ds,\r
  69           cm: cm,\r
  70           enableColLock: false,\r
  71           loadMask: true,\r
  72           plugins: filters,\r
  73           height:400,\r
  74           width:700,        \r
  75           el: 'grid-example',\r
  76     autoExpandColumn: 'company',\r
  77           bbar: new Ext.PagingToolbar({\r
  78             store: ds,\r
  79             pageSize: 15,\r
  80             plugins: filters\r
  81           })\r
  82         });\r
  83         grid.render();\r
  84         \r
  85         ds.load({params:{start: 0, limit: 15}});\r
  86 });