Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / grid-filtering / grid-filter-local.js
diff --git a/examples/grid-filtering/grid-filter-local.js b/examples/grid-filtering/grid-filter-local.js
new file mode 100644 (file)
index 0000000..f4efd1c
--- /dev/null
@@ -0,0 +1,234 @@
+/*!
+ * 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