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