Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

diff --git a/examples/grid/array-grid.js b/examples/grid/array-grid.js
index 3e432d7..3d744f7 100644 (file)
--- a/examples/grid/array-grid.js
+++ b/examples/grid/array-grid.js
@@ -1,17 +1,15 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.onReady(function(){
-    Ext.QuickTips.init();
+Ext.require([
+    'Ext.grid.*',
+    'Ext.data.*',
+    'Ext.util.*',
+    'Ext.state.*'
+]);
 
-    // NOTE: This is an example showing simple state management. During development,
-    // it is generally best to disable state management as dynamically-generated ids
-    // can change across page loads, leading to unpredictable results.  The developer
-    // should ensure that stable state ids are set for stateful components in real apps.    
-    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+Ext.onReady(function() {
+    Ext.QuickTips.init();
+    
+    // setup the state provider, all state information will be saved to a cookie
+    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
 
     // sample static data for the store
     var myData = [
@@ -42,7 +40,7 @@ Ext.onReady(function(){
         ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
         ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
         ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
-        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],            
+        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
         ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
     ];
 
@@ -73,56 +71,55 @@ Ext.onReady(function(){
     }
 
     // create the data store
-    var store = new Ext.data.ArrayStore({
+    var store = Ext.create('Ext.data.ArrayStore', {
         fields: [
            {name: 'company'},
            {name: 'price',      type: 'float'},
            {name: 'change',     type: 'float'},
            {name: 'pctChange',  type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
-        ]
+        ],
+        data: myData
     });
 
-    // manually load local data
-    store.loadData(myData);
-
     // create the Grid
-    var grid = new Ext.grid.GridPanel({
+    var grid = Ext.create('Ext.grid.Panel', {
         store: store,
+        stateful: true,
+        stateId: 'stateGrid',
         columns: [
             {
-                id       :'company',
-                header   : 'Company', 
-                width    : 160, 
-                sortable : true, 
+                text     : 'Company',
+                flex     : 1,
+                sortable : false,
                 dataIndex: 'company'
             },
             {
-                header   : 'Price', 
-                width    : 75, 
-                sortable : true, 
-                renderer : 'usMoney', 
+                text     : 'Price',
+                width    : 75,
+                sortable : true,
+                renderer : 'usMoney',
                 dataIndex: 'price'
             },
             {
-                header   : 'Change', 
-                width    : 75, 
-                sortable : true, 
-                renderer : change, 
+                text     : 'Change',
+                width    : 75,
+                sortable : true,
+                renderer : change,
                 dataIndex: 'change'
             },
             {
-                header   : '% Change', 
-                width    : 75, 
-                sortable : true, 
-                renderer : pctChange, 
+                text     : '% Change',
+                width    : 75,
+                sortable : true,
+                renderer : pctChange,
                 dataIndex: 'pctChange'
             },
             {
-                header   : 'Last Updated', 
-                width    : 85, 
-                sortable : true, 
-                renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
+                text     : 'Last Updated',
+                width    : 85,
+                sortable : true,
+                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                 dataIndex: 'lastChange'
             },
             {
@@ -138,7 +135,7 @@ Ext.onReady(function(){
                 }, {
                     getClass: function(v, meta, rec) {          // Or return a class from a function
                         if (rec.get('change') < 0) {
-                            this.items[1].tooltip = 'Do not buy!';
+                            this.items[1].tooltip = 'Hold stock';
                             return 'alert-col';
                         } else {
                             this.items[1].tooltip = 'Buy stock';
@@ -147,21 +144,17 @@ Ext.onReady(function(){
                     },
                     handler: function(grid, rowIndex, colIndex) {
                         var rec = store.getAt(rowIndex);
-                        alert("Buy " + rec.get('company'));
+                        alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                     }
                 }]
             }
         ],
-        stripeRows: true,
-        autoExpandColumn: 'company',
         height: 350,
         width: 600,
         title: 'Array Grid',
-        // config options for stateful behavior
-        stateful: true,
-        stateId: 'grid'
+        renderTo: 'grid-example',
+        viewConfig: {
+            stripeRows: true
+        }
     });
-
-    // render the grid to the specified div in the page
-    grid.render('grid-example');
-});
\ No newline at end of file
+});