step4

.metadata/view/ExpenseColumnChart

@@ -1 +1 @@
-{"id":"ExtBox1-ext-gen5795","type":"chart","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":250,"width":400,"animate":"true","insetPadding":20,"store":"ExpenseStore","designer|userClassName":"ExpenseColumnChart"},"designerId":"7916ab40-6bfe-4a99-92a8-19a41b841251","$viewOrder":2,"iconCls":"icon-column-chart","cn":[{"id":"ExtBox1-ext-gen5798","type":"categoryaxis","reference":{"name":"axes","type":"array"},"codeClass":null,"userConfig":{"fields":"['actualDate']","position":"bottom","title":"Date","designer|userClassName":"MyCategoryAxis"}},{"id":"ExtBox1-ext-gen5801","type":"numericaxis","reference":{"name":"axes","type":"array"},"codeClass":null,"userConfig":{"fields":"['amount']","position":"left","title":"Amount","designer|userClassName":"MyNumericAxis"}},{"id":"ExtBox1-ext-gen5804","type":"columnseries","reference":{"name":"series","type":"array"},"codeClass":null,"userConfig":{"label":null,"xField":"actualDate","yField":"['amount']","designer|userClassName":"MyColumnSeries"}}]}
+{"id":"ExtBox1-ext-gen5795","type":"chart","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":250,"width":400,"animate":"true","insetPadding":20,"store":"ExpenseStore","designer|userClassName":"ExpenseColumnChart","designer|userAlias":"expensecolumnchart"},"designerId":"7916ab40-6bfe-4a99-92a8-19a41b841251","$viewOrder":2,"iconCls":"icon-column-chart","cn":[{"id":"ExtBox1-ext-gen5798","type":"categoryaxis","reference":{"name":"axes","type":"array"},"codeClass":null,"userConfig":{"fields":"['actualDate']","position":"bottom","title":"Date","designer|userClassName":"MyCategoryAxis"}},{"id":"ExtBox1-ext-gen5801","type":"numericaxis","reference":{"name":"axes","type":"array"},"codeClass":null,"userConfig":{"fields":"['amount']","position":"left","title":"Amount","designer|userClassName":"MyNumericAxis"}},{"id":"ExtBox1-ext-gen5804","type":"columnseries","reference":{"name":"series","type":"array"},"codeClass":null,"userConfig":{"label":null,"xField":"actualDate","yField":"['amount']","designer|userClassName":"MyColumnSeries"}}]}

.metadata/view/ExpenseGrid

@@ -1 +1 @@
-{"id":"ExtBox1-ext-gen1824","type":"gridpanel","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":275,"width":519,"title":null,"store":"ExpenseStore","designer|userClassName":"ExpenseGrid"},"designerId":"bf0ccc13-d7fd-46ac-a780-ed115a9b1cff","$viewOrder":0,"cn":[{"id":"ExtBox1-ext-gen1859","type":"gridview","reference":{"name":"viewConfig","type":"object"},"codeClass":null,"userConfig":{"designer|userClassName":"MyGridView"}},{"id":"ExtBox1-ext-gen4110","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"name","text":"Name","designer|userClassName":"MyColumn1"}},{"id":"ExtBox1-ext-gen4119","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"actualDate","text":"ActualDate","designer|userClassName":"MyColumn2"}},{"id":"ExtBox1-ext-gen4128","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"submitDate","text":"SubmitDate","designer|userClassName":"MyColumn3"}},{"id":"ExtBox1-ext-gen4137","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"category","text":"Category","designer|userClassName":"MyColumn4"}},{"id":"ExtBox1-ext-gen4146","type":"numbercolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"align":"right","dataIndex":"amount","text":"Amount","format":"$0.00","designer|userClassName":"MyColumn5"}}]}
+{"id":"ExtBox1-ext-gen1824","type":"gridpanel","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":275,"width":519,"title":null,"store":"ExpenseStore","designer|userClassName":"ExpenseGrid","designer|userAlias":"expensegrid"},"designerId":"bf0ccc13-d7fd-46ac-a780-ed115a9b1cff","$viewOrder":0,"cn":[{"id":"ExtBox1-ext-gen1859","type":"gridview","reference":{"name":"viewConfig","type":"object"},"codeClass":null,"userConfig":{"designer|userClassName":"MyGridView"}},{"id":"ExtBox1-ext-gen4110","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"name","text":"Name","designer|userClassName":"MyColumn1"}},{"id":"ExtBox1-ext-gen4119","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"actualDate","text":"ActualDate","designer|userClassName":"MyColumn2"}},{"id":"ExtBox1-ext-gen4128","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"submitDate","text":"SubmitDate","designer|userClassName":"MyColumn3"}},{"id":"ExtBox1-ext-gen4137","type":"gridcolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"dataIndex":"category","text":"Category","designer|userClassName":"MyColumn4"}},{"id":"ExtBox1-ext-gen4146","type":"numbercolumn","reference":{"name":"columns","type":"array"},"codeClass":null,"userConfig":{"align":"right","dataIndex":"amount","text":"Amount","format":"$0.00","designer|userClassName":"MyColumn5"}}]}

.metadata/view/ExpensePieChart

@@ -1 +1 @@
-{"id":"ExtBox1-ext-gen5510","type":"chart","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":250,"width":400,"animate":"true","insetPadding":20,"store":"ExpenseStore","designer|userClassName":"ExpensePieChart"},"designerId":"e20f5851-6680-4339-96a1-fdcbf08d89bd","$viewOrder":1,"iconCls":"icon-pie-chart","cn":[{"id":"ExtBox1-ext-gen5513","type":"pieseries","reference":{"name":"series","type":"array"},"codeClass":null,"userConfig":{"label":"{'field':'name','display':'rotate','contrast':true,'font':'12px Arial'}","showInLegend":true,"angleField":"amount","designer|userClassName":"MyPieSeries"}}]}
+{"id":"ExtBox1-ext-gen5510","type":"chart","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":250,"width":400,"animate":"true","insetPadding":20,"store":"ExpenseStore","designer|userClassName":"ExpensePieChart","designer|userAlias":"expensepiechart"},"designerId":"e20f5851-6680-4339-96a1-fdcbf08d89bd","$viewOrder":1,"iconCls":"icon-pie-chart","cn":[{"id":"ExtBox1-ext-gen5513","type":"pieseries","reference":{"name":"series","type":"array"},"codeClass":null,"userConfig":{"label":"{'field':'name','display':'rotate','contrast':true,'font':'12px Arial'}","showInLegend":true,"angleField":"amount","designer|userClassName":"MyPieSeries"}}]}

.metadata/view/ExpenseTracker

@@ -0,0 +1 @@
+{"id":"ExtBox1-ext-gen6632","type":"panel","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"height":363,"width":794,"layout":"hbox","title":"Epense Tracker","designer|userClassName":"ExpenseTracker","container|align":"stretch"},"designerId":"2a53b25c-6a3f-4475-86a3-3622a4fef82e","$viewOrder":3,"cn":[{"id":"ExtBox1-ext-gen6892","type":"linkedinstance","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{},"iconCls":"icon-linkedinstance","masterInstanceId":"ExtBox1-ext-gen1824"},{"id":"ExtBox1-ext-gen8272","type":"container","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{"itemId":"chartCt","activeItem":0,"layout":"card","designer|userClassName":"MyContainer","layout|flex":1},"cn":[{"id":"ExtBox1-ext-gen8480","type":"linkedinstance","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{},"iconCls":"icon-linkedinstance","masterInstanceId":"ExtBox1-ext-gen5510"},{"id":"ExtBox1-ext-gen9277","type":"linkedinstance","reference":{"name":"items","type":"array"},"codeClass":null,"userConfig":{},"iconCls":"icon-linkedinstance","masterInstanceId":"ExtBox1-ext-gen5795"}]}]}

app/store/ExpenseStore.js

@@ -1,6 +1,6 @@
 /*
  * File: app/store/ExpenseStore.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/

app/view/ExpenseColumnChart.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ExpenseColumnChart.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/
@@ -13,6 +13,7 @@
 
 Ext.define('MyApp.view.ExpenseColumnChart', {
     extend: 'MyApp.view.ui.ExpenseColumnChart',
+    alias: 'widget.expensecolumnchart',
 
     initComponent: function() {
         var me = this;

app/view/ExpenseGrid.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ExpenseGrid.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/
@@ -13,6 +13,7 @@
 
 Ext.define('MyApp.view.ExpenseGrid', {
     extend: 'MyApp.view.ui.ExpenseGrid',
+    alias: 'widget.expensegrid',
 
     initComponent: function() {
         var me = this;

app/view/ExpensePieChart.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ExpensePieChart.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/
@@ -13,6 +13,7 @@
 
 Ext.define('MyApp.view.ExpensePieChart', {
     extend: 'MyApp.view.ui.ExpensePieChart',
+    alias: 'widget.expensepiechart',
 
     initComponent: function() {
         var me = this;

app/view/ExpenseTracker.js

@@ -0,0 +1,22 @@
+/*
+ * File: app/view/ExpenseTracker.js
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
+ *
+ * This file was generated by Sencha Designer version 2.0.0.
+ * http://www.sencha.com/products/designer/
+ *
+ * This file will be generated the first time you export.
+ *
+ * You should implement event handling and custom methods in this
+ * class.
+ */
+
+Ext.define('MyApp.view.ExpenseTracker', {
+    extend: 'MyApp.view.ui.ExpenseTracker',
+
+    initComponent: function() {
+        var me = this;
+        me.callParent(arguments);
+    }
+
+});

app/view/ui/ExpenseColumnChart.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ui/ExpenseColumnChart.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/

app/view/ui/ExpenseGrid.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ui/ExpenseGrid.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/

app/view/ui/ExpensePieChart.js

@@ -1,6 +1,6 @@
 /*
  * File: app/view/ui/ExpensePieChart.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/

app/view/ui/ExpenseTracker.js

@@ -0,0 +1,60 @@
+/*
+ * File: app/view/ui/ExpenseTracker.js
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
+ *
+ * This file was generated by Sencha Designer version 2.0.0.
+ * http://www.sencha.com/products/designer/
+ *
+ * This file will be auto-generated each and everytime you export.
+ *
+ * Do NOT hand edit this file.
+ */
+
+Ext.define('MyApp.view.ui.ExpenseTracker', {
+    extend: 'Ext.panel.Panel',
+    requires: [
+        'MyApp.view.ExpenseGrid',
+        'MyApp.view.ExpensePieChart',
+        'MyApp.view.ExpenseColumnChart'
+    ],
+
+    height: 363,
+    width: 794,
+    layout: {
+        align: 'stretch',
+        type: 'hbox'
+    },
+    title: 'Epense Tracker',
+
+    initComponent: function() {
+        var me = this;
+
+        Ext.applyIf(me, {
+            items: [
+                {
+                    xtype: 'expensegrid'
+                },
+                {
+                    xtype: 'container',
+                    itemId: 'chartCt',
+                    activeItem: 0,
+                    layout: {
+                        type: 'card'
+                    },
+                    flex: 1,
+                    items: [
+                        {
+                            xtype: 'expensepiechart'
+                        },
+                        {
+                            xtype: 'expensecolumnchart'
+                        }
+                    ]
+                }
+            ]
+        });
+
+        me.callParent(arguments);
+    }
+
+});

designer.js

@@ -1,6 +1,6 @@
 /*
  * File: designer.js
- * Date: Tue Oct 25 2011 05:22:23 GMT-0700 (PDT)
+ * Date: Tue Oct 25 2011 05:25:20 GMT-0700 (PDT)
  *
  * This file was generated by Sencha Designer version 2.0.0.
  * http://www.sencha.com/products/designer/

sencha-expenses-desktop.xds

@@ -59,6 +59,13 @@
                 "/Users/aconran/Sites/demos/Sencha-Expenses-Desktop/app/view/ui/ExpenseColumnChart.js"
             ],
             "className": "ExpenseColumnChart"
+        },
+        "2a53b25c-6a3f-4475-86a3-3622a4fef82e": {
+            "paths": [
+                "/Users/aconran/Sites/demos/Sencha-Expenses-Desktop/app/view/ExpenseTracker.js",
+                "/Users/aconran/Sites/demos/Sencha-Expenses-Desktop/app/view/ui/ExpenseTracker.js"
+            ],
+            "className": "ExpenseTracker"
         }
     }
 }