--- /dev/null
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){\r
+\r
+ Ext.QuickTips.init();\r
+ \r
+ // for this demo configure local and remote urls for demo purposes\r
+ var url = {\r
+ local: 'grid-filter.json', // static data file\r
+ remote: 'grid-filter.php'\r
+ };\r
+\r
+ // configure whether filter query is encoded or not (initially)\r
+ var encode = false;\r
+ \r
+ // configure whether filtering is performed locally or remotely (initially)\r
+ var local = true;\r
+\r
+ store = new Ext.data.JsonStore({\r
+ // store configs\r
+ autoDestroy: true,\r
+ url: (local ? url.local : url.remote),\r
+ remoteSort: false,\r
+ sortInfo: {\r
+ field: 'company',\r
+ direction: 'ASC'\r
+ },\r
+ storeId: 'myStore',\r
+ \r
+ // reader configs\r
+ idProperty: 'id',\r
+ root: 'data',\r
+ totalProperty: 'total',\r
+ fields: [{\r
+ name: 'id'\r
+ }, {\r
+ name: 'company'\r
+ }, {\r
+ name: 'price',\r
+ type: 'float'\r
+ }, {\r
+ name: 'date',\r
+ type: 'date',\r
+ dateFormat: 'Y-m-d H:i:s'\r
+ }, {\r
+ name: 'visible',\r
+ type: 'boolean'\r
+ }, {\r
+ name: 'size'\r
+ }]\r
+ });\r
+\r
+ var filters = new Ext.ux.grid.GridFilters({\r
+ // encode and local configuration options defined previously for easier reuse\r
+ encode: encode, // json encode the filter query\r
+ local: local, // defaults to false (remote filtering)\r
+ filters: [{\r
+ type: 'numeric',\r
+ dataIndex: 'id'\r
+ }, {\r
+ type: 'string',\r
+ dataIndex: 'company',\r
+ disabled: true\r
+ }, {\r
+ type: 'numeric',\r
+ dataIndex: 'price'\r
+ }, {\r
+ type: 'date',\r
+ dataIndex: 'date'\r
+ }, {\r
+ type: 'list',\r
+ dataIndex: 'size',\r
+ options: ['small', 'medium', 'large', 'extra large'],\r
+ phpMode: true\r
+ }, {\r
+ type: 'boolean',\r
+ dataIndex: 'visible'\r
+ }]\r
+ }); \r
+ \r
+ // use a factory method to reduce code while demonstrating\r
+ // that the GridFilter plugin may be configured with or without\r
+ // the filter types (the filters may be specified on the column model\r
+ var createColModel = function (finish, start) {\r
+\r
+ var columns = [{\r
+ dataIndex: 'id',\r
+ header: 'Id',\r
+ // instead of specifying filter config just specify filterable=true\r
+ // to use store's field's type property (if type property not\r
+ // explicitly specified in store config it will be 'auto' which\r
+ // GridFilters will assume to be 'StringFilter'\r
+ filterable: true\r
+ //,filter: {type: 'numeric'}\r
+ }, {\r
+ dataIndex: 'company',\r
+ header: 'Company',\r
+ id: 'company',\r
+ filter: {\r
+ type: 'string'\r
+ // specify disabled to disable the filter menu\r
+ //, disabled: true\r
+ }\r
+ }, {\r
+ dataIndex: 'price',\r
+ header: 'Price',\r
+ filter: {\r
+ //type: 'numeric' // specify type here or in store fields config\r
+ }\r
+ }, {\r
+ dataIndex: 'size',\r
+ header: 'Size',\r
+ filter: {\r
+ type: 'list',\r
+ options: ['small', 'medium', 'large', 'extra large']\r
+ //,phpMode: true\r
+ }\r
+ }, {\r
+ dataIndex: 'date',\r
+ header: 'Date',\r
+ renderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
+ filter: {\r
+ //type: 'date' // specify type here or in store fields config\r
+ } \r
+ }, {\r
+ dataIndex: 'visible',\r
+ header: 'Visible',\r
+ filter: {\r
+ //type: 'boolean' // specify type here or in store fields config\r
+ }\r
+ }];\r
+\r
+ return new Ext.grid.ColumnModel({\r
+ columns: columns.slice(start || 0, finish),\r
+ defaults: {\r
+ sortable: true\r
+ }\r
+ });\r
+ };\r
+ \r
+ var grid = new Ext.grid.GridPanel({\r
+ border: false,\r
+ store: store,\r
+ colModel: createColModel(4),\r
+ loadMask: true,\r
+ plugins: [filters],\r
+ autoExpandColumn: 'company',\r
+ listeners: {\r
+ render: {\r
+ fn: function(){\r
+ store.load({\r
+ params: {\r
+ start: 0,\r
+ limit: 50\r
+ }\r
+ });\r
+ }\r
+ }\r
+ },\r
+ bbar: new Ext.PagingToolbar({\r
+ store: store,\r
+ pageSize: 50,\r
+ plugins: [filters]\r
+ })\r
+ });\r
+\r
+ // add some buttons to bottom toolbar just for demonstration purposes\r
+ grid.getBottomToolbar().add([\r
+ '->',\r
+ {\r
+ text: 'Encode: ' + (encode ? 'On' : 'Off'),\r
+ tooltip: 'Toggle Filter encoding on/off',\r
+ enableToggle: true,\r
+ handler: function (button, state) {\r
+ var encode = (grid.filters.encode===true) ? false : true;\r
+ var text = 'Encode: ' + (encode ? 'On' : 'Off'); \r
+ // remove the prior parameters from the last load options\r
+ grid.filters.cleanParams(grid.getStore().lastOptions.params);\r
+ grid.filters.encode = encode;\r
+ button.setText(text);\r
+ grid.getStore().reload();\r
+ } \r
+ },{\r
+ text: 'Local Filtering: ' + (local ? 'On' : 'Off'),\r
+ tooltip: 'Toggle Filtering between remote/local',\r
+ enableToggle: true,\r
+ handler: function (button, state) {\r
+ var local = (grid.filters.local===true) ? false : true;\r
+ var text = 'Local Filtering: ' + (local ? 'On' : 'Off');\r
+ var newUrl = local ? url.local : url.remote;\r
+ \r
+ // update the GridFilter setting\r
+ grid.filters.local = local;\r
+ // bind the store again so GridFilters is listening to appropriate store event\r
+ grid.filters.bindStore(grid.getStore());\r
+ // update the url for the proxy\r
+ grid.getStore().proxy.setApi('read', newUrl);\r
+\r
+ button.setText(text);\r
+ grid.getStore().reload();\r
+ } \r
+ },{\r
+ text: 'All Filter Data',\r
+ tooltip: 'Get Filter Data for Grid',\r
+ handler: function () {\r
+ var data = Ext.encode(grid.filters.getFilterData());\r
+ Ext.Msg.alert('All Filter Data',data);\r
+ } \r
+ },{\r
+ text: 'Clear Filter Data',\r
+ handler: function () {\r
+ grid.filters.clearFilters();\r
+ } \r
+ },{\r
+ text: 'Reconfigure Grid',\r
+ handler: function () {\r
+ grid.reconfigure(store, createColModel(6));\r
+ } \r
+ } \r
+ ]);\r
+\r
+ var win = new Ext.Window({\r
+ title: 'Grid Filters Example',\r
+ height: 400,\r
+ width: 700,\r
+ layout: 'fit',\r
+ items: grid\r
+ }).show();\r
+ \r
+});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff