Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / grid / grid-plugins.js

diff --git a/examples/grid/grid3.js b/examples/grid/grid-plugins.js
similarity index 77%
rename from examples/grid/grid3.js
rename to examples/grid/grid-plugins.js
index bb28744..bed7a46 100644 (file)
--- a/examples/grid/grid3.js
+++ b/examples/grid/grid-plugins.js
@@ -1,16 +1,14 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 \r
 Ext.onReady(function(){\r
 \r
     Ext.QuickTips.init();\r
-    \r
+\r
     var xg = Ext.grid;\r
 \r
     // shared reader\r
@@ -28,7 +26,7 @@ Ext.onReady(function(){
     // Grid 1\r
     ////////////////////////////////////////////////////////////////////////////////////////\r
     // row expander\r
-    var expander = new xg.RowExpander({\r
+    var expander = new Ext.ux.grid.RowExpander({\r
         tpl : new Ext.Template(\r
             '<p><b>Company:</b> {company}</p><br>',\r
             '<p><b>Summary:</b> {desc}</p>'\r
@@ -40,17 +38,24 @@ Ext.onReady(function(){
             reader: reader,\r
             data: xg.dummyData\r
         }),\r
-        cm: new xg.ColumnModel([\r
-            expander,\r
-            {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},\r
-            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
-            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},\r
-            {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},\r
-            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
-        ]),\r
+        cm: new xg.ColumnModel({\r
+            defaults: {\r
+                width: 20,\r
+                sortable: true\r
+            },\r
+            columns: [\r
+                expander,\r
+                {id:'company',header: "Company", width: 40, dataIndex: 'company'},\r
+                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
+                {header: "Change", dataIndex: 'change'},\r
+                {header: "% Change", dataIndex: 'pctChange'},\r
+                {header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
+            ]\r
+        }),\r
         viewConfig: {\r
             forceFit:true\r
         },\r
+        columnLines: true,\r
         width: 600,\r
         height: 300,\r
         plugins: expander,\r
@@ -70,15 +75,22 @@ Ext.onReady(function(){
             reader: reader,\r
             data: xg.dummyData\r
         }),\r
-        cm: new xg.ColumnModel([\r
-            sm,\r
-            {id:'company',header: "Company", width: 200, sortable: true, dataIndex: 'company'},\r
-            {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
-            {header: "Change", width: 120, sortable: true, dataIndex: 'change'},\r
-            {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},\r
-            {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
-        ]),\r
+        cm: new xg.ColumnModel({\r
+            defaults: {\r
+                width: 120,\r
+                sortable: true\r
+            },\r
+            columns: [\r
+                sm,\r
+                {id:'company',header: "Company", width: 200, dataIndex: 'company'},\r
+                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
+                {header: "Change", dataIndex: 'change'},\r
+                {header: "% Change", dataIndex: 'pctChange'},\r
+                {header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
+            ]\r
+        }),\r
         sm: sm,\r
+        columnLines: true,\r
         width:600,\r
         height:300,\r
         frame:true,\r
@@ -106,6 +118,7 @@ Ext.onReady(function(){
         viewConfig: {\r
             forceFit:true\r
         },\r
+        columnLines: true,\r
         width:600,\r
         height:300,\r
         title:'Grid with Numbered Rows and Force Fit',\r
@@ -116,7 +129,19 @@ Ext.onReady(function(){
     ////////////////////////////////////////////////////////////////////////////////////////\r
     // Grid 4\r
     ////////////////////////////////////////////////////////////////////////////////////////\r
-    var sm2 = new xg.CheckboxSelectionModel();\r
+    var sm2 = new xg.CheckboxSelectionModel({\r
+        listeners: {\r
+            // On selection change, set enabled state of the removeButton\r
+            // which was placed into the GridPanel using the ref config\r
+            selectionchange: function(sm) {\r
+                if (sm.getCount()) {\r
+                    grid4.removeButton.enable();\r
+                } else {\r
+                    grid4.removeButton.disable();\r
+                }\r
+            }\r
+        }\r
+    });\r
     var grid4 = new xg.GridPanel({\r
         id:'button-grid',\r
         store: new Ext.data.Store({\r
@@ -136,6 +161,7 @@ Ext.onReady(function(){
         viewConfig: {\r
             forceFit:true\r
         },\r
+        columnLines: true,\r
 \r
         // inline buttons\r
         buttons: [{text:'Save'},{text:'Cancel'}],\r
@@ -153,7 +179,11 @@ Ext.onReady(function(){
         },'-',{\r
             text:'Remove Something',\r
             tooltip:'Remove the selected item',\r
-            iconCls:'remove'\r
+            iconCls:'remove',\r
+\r
+            // Place a reference in the GridPanel\r
+            ref: '../removeButton',\r
+            disabled: true\r
         }],\r
 \r
         width:600,\r