Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / examples / charts / FormDashboard.js

diff --git a/examples/charts/FormDashboard.js b/examples/charts/FormDashboard.js
index 46925f9..d4c1ec6 100644 (file)
--- a/examples/charts/FormDashboard.js
+++ b/examples/charts/FormDashboard.js
@@ -1,3 +1,17 @@
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
 Ext.require([
     'Ext.form.*',
     'Ext.data.*',
@@ -39,8 +53,8 @@ Ext.onReady(function(){
         //updates a record modified via the form
         updateRecord = function(rec) {
             var name, series, i, l, items, json = [{
-                'Name': 'Price %',
-                'Data': rec.get('price %')
+                'Name': 'Price',
+                'Data': rec.get('price')
             }, {
                 'Name': 'Revenue %',
                 'Data': rec.get('revenue %')
@@ -62,8 +76,14 @@ Ext.onReady(function(){
                 // buffer so we don't refire while the user is still typing
                 buffer: 200,
                 change: function(field, newValue, oldValue, listener) {
-                    form.updateRecord(rec);
-                    updateRecord(rec);
+                    if (rec && form) {
+                        if (newValue > field.maxValue) {
+                            field.setValue(field.maxValue);
+                        } else {
+                            form.updateRecord(rec);
+                            updateRecord(rec);
+                        }
+                    }
                 }
             };
         };
@@ -114,7 +134,7 @@ Ext.onReady(function(){
     var ds = Ext.create('Ext.data.ArrayStore', {
         fields: [
             {name: 'company'},
-            {name: 'price %',   type: 'float'},
+            {name: 'price',   type: 'float'},
             {name: 'revenue %', type: 'float'},
             {name: 'growth %',  type: 'float'},
             {name: 'product %', type: 'float'},
@@ -128,7 +148,7 @@ Ext.onReady(function(){
         fields: ['Name', 'Data'],
         data: [
         {
-            'Name': 'Price %',
+            'Name': 'Price',
             'Data': 100
         }, {
             'Name': 'Revenue %',
@@ -154,12 +174,10 @@ Ext.onReady(function(){
         animate: true,
         store: chs,
         axes: [{
+            steps: 5,
             type: 'Radial',
             position: 'radial',
-            maximum: 100,
-            label: {
-                display: 'none'    
-            }
+            maximum: 100
         }],
         series: [{
             type: 'radar',
@@ -168,17 +186,13 @@ Ext.onReady(function(){
             showInLegend: false,
             showMarkers: true,
             markerConfig: {
-                radius: 2,
-                size: 2
+                radius: 4,
+                size: 4
             },
             style: {
-                fill: '#273f68',
+                fill: 'rgb(194,214,240)',
                 opacity: 0.5,
                 'stroke-width': 0.5
-            },
-            label: {
-                display: true,
-                field: 'Name'
             }
         }]
     });
@@ -202,13 +216,15 @@ Ext.onReady(function(){
                 text   : 'Price',
                 width    : 75,
                 sortable : true,
-                dataIndex: 'price %',
-                renderer: perc
+                dataIndex: 'price',
+                align: 'right',
+                renderer : 'usMoney'
             },
             {
                 text   : 'Revenue',
                 width    : 75,
                 sortable : true,
+                align: 'right',
                 dataIndex: 'revenue %',
                 renderer: perc
             },
@@ -216,6 +232,7 @@ Ext.onReady(function(){
                 text   : 'Growth',
                 width    : 75,
                 sortable : true,
+                align: 'right',
                 dataIndex: 'growth %',
                 renderer: perc
             },
@@ -223,6 +240,7 @@ Ext.onReady(function(){
                 text   : 'Product',
                 width    : 75,
                 sortable : true,
+                align: 'right',
                 dataIndex: 'product %',
                 renderer: perc
             },
@@ -230,6 +248,7 @@ Ext.onReady(function(){
                 text   : 'Market',
                 width    : 75,
                 sortable : true,
+                align: 'right',
                 dataIndex: 'market %',
                 renderer: perc
             }
@@ -240,8 +259,18 @@ Ext.onReady(function(){
                 var json, name, i, l, items, series, fields;
                 if (records[0]) {
                     rec = records[0];
-                    form = form || this.up('form').getForm();
-                    fields = form.getFields();
+                    if (!form) {
+                        form = this.up('form').getForm();
+                        fields = form.getFields();
+                        fields.each(function(field){
+                            if (field.name != 'company') {
+                                field.setDisabled(false);
+                            }
+                        });
+                    } else {
+                        fields = form.getFields();
+                    }
+                    
                     // prevent change events from firing
                     fields.each(function(field){
                         field.suspendEvents();
@@ -265,18 +294,21 @@ Ext.onReady(function(){
         axes: [{
             type: 'Numeric',
             position: 'left',
-            fields: ['price %'],
+            fields: ['price'],
             minimum: 0,
-            label: {
-                font: '9px Arial'
-            },
             hidden: true
         }, {
             type: 'Category',
             position: 'bottom',
             fields: ['company'],
             label: {
-                font: '9px Arial'
+                renderer: function(v) {
+                    return Ext.String.ellipsis(v, 15, false);
+                },
+                font: '9px Arial',
+                rotate: {
+                    degrees: 270
+                }
             }
         }],
         series: [{
@@ -290,8 +322,9 @@ Ext.onReady(function(){
                 fill: '#a2b5ca'
             },
             label: {
+                contrast: true,
                 display: 'insideEnd',
-                field: 'price %',
+                field: 'price',
                 color: '#000',
                 orientation: 'vertical',
                 'text-anchor': 'middle'
@@ -307,7 +340,7 @@ Ext.onReady(function(){
                 }
             },
             xField: 'name',
-            yField: ['price %']
+            yField: ['price']
         }]        
     });
     
@@ -376,32 +409,53 @@ Ext.onReady(function(){
                     title:'Company details',
                     defaults: {
                         width: 240,
-                        labelWidth: 90
+                        labelWidth: 90,
+                        disabled: true
                     },
-                    defaultType: 'textfield',
+                    defaultType: 'numberfield',
                     items: [{
                         fieldLabel: 'Name',
                         name: 'company',
-                        disabled: true
+                        xtype: 'textfield'
                     },{
-                        fieldLabel: 'Price %',
-                        name: 'price %',
-                        listeners: createListeners('price %')
+                        fieldLabel: 'Price',
+                        name: 'price',
+                        maxValue: 100,
+                        minValue: 0,
+                        enforceMaxLength: true,
+                        maxLength: 5,
+                        listeners: createListeners('price')
                     },{
                         fieldLabel: 'Revenue %',
                         name: 'revenue %',
+                        maxValue: 100,
+                        minValue: 0,
+                        enforceMaxLength: true,
+                        maxLength: 5,
                         listeners: createListeners('revenue %')
                     },{
                         fieldLabel: 'Growth %',
                         name: 'growth %',
+                        maxValue: 100,
+                        minValue: 0,
+                        enforceMaxLength: true,
+                        maxLength: 5,
                         listeners: createListeners('growth %')
                     },{
                         fieldLabel: 'Product %',
                         name: 'product %',
+                        maxValue: 100,
+                        minValue: 0,
+                        enforceMaxLength: true,
+                        maxLength: 5,
                         listeners: createListeners('product %')
                     },{
                         fieldLabel: 'Market %',
                         name: 'market %',
+                        maxValue: 100,
+                        minValue: 0,
+                        enforceMaxLength: true,
+                        maxLength: 5,
                         listeners: createListeners('market %')
                     }]
                 }, radarChart]
@@ -411,4 +465,4 @@ Ext.onReady(function(){
     });
 
     var gp = Ext.getCmp('company-form');
-});
\ No newline at end of file
+});