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