title: extjs grid and chart
body: <p>does someone knows how to use the same store for chart and for grid
  actualy, the question is how to draw a bar chart representing prices for product category in this example</p>
  
  <pre><code>     http://www.mysamplecode.com/2012/06/extjs-local-storage-example.html
  </code></pre>
  
  <p>code: </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;ExtJs 4 Local Storage Example&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css"
      href="extjs-4.0.1/resources/css/ext-all.css"&gt;
  
      &lt;script type="text/javascript" src="extjs-4.0.1/ext-all-debug.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="myExample"&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  
   Ext.Loader.setConfig({ 
   enabled: true
    });
  
    Ext.application({
  
      name: 'myApp',
      appFolder: 'app',
  
       controllers: [
                'ItemMaster'
            ],
  </code></pre>
  
  <p>//data container</p>
  
  <pre><code>    launch: function() {
      Ext.create('Ext.container.Container', {
       renderTo: 'myExample',
       height: 250,
          width: 500,
          margin: '5 5 5 5 ',
       layout: 'fit',
          items: [
              {
               xtype: 'itemList'
              }
          ]
      });
    }
  });
  </code></pre>
  
  <p>// model</p>
  
  <pre><code>Ext.define('myApp.model.Product', {
  extend: 'Ext.data.Model',
  fields: [
        'itemNumber',
        'description',
        'category',
        'price',
        ]
   });
  </code></pre>
  
  <p>// store</p>
  
  <pre><code>Ext.define('myApp.store.Products', {
  extend: 'Ext.data.Store',
  model: 'myApp.model.Product',
  autoLoad: true,
  proxy: {
       type: 'localstorage',
      id  : 'myProxyKey'
  }
  
  });
  </code></pre>
  
  <p>//view</p>
  
  <pre><code>Ext.define('myApp.view.ItemList' ,{
  extend: 'Ext.grid.Panel',
  alias : 'widget.itemList',
  title : 'List of my Store Products',
  store : 'Products',
  dockedItems: [{
      xtype: 'pagingtoolbar',
      store : 'Products',  
      dock: 'bottom',
      displayInfo: true,
      items: [
              { 
               xtype: 'tbseparator'
              },
              {
                  xtype : 'button',
                  text: 'Add Product',
                  action: 'add'
        }
      ]
  }],
  
  initComponent: function() {
  
   this.columns = [
          {
           header: 'Item Number',  
           dataIndex: 'itemNumber',  
           flex: 1
          },
          {
           header: 'Description', 
           dataIndex: 'description', 
           flex: 2
          },
          {
           header: 'Category',  
           dataIndex: 'category',  
           flex: 1
          },
          {
           header: 'Price', 
           dataIndex: 'price', 
           flex: 1
          }
      ];
  
      this.callParent(arguments);
     }
     });
  </code></pre>
  
  <p>// form for adding and editing</p>
  
  <pre><code> Ext.define('myApp.view.ItemEdit', {
   extend: 'Ext.window.Window',
   alias : 'widget.itemEdit',
  
   title : 'Product Maintenance',
   layout: 'fit',
   autoShow: true,
  
   initComponent: function() {
      this.items = [
          {
              xtype: 'form',
              items: [
                  {
                      xtype: 'textfield',
                      name : 'itemNumber',
                      fieldLabel: 'Item Number',
                      allowBlank: false,
                      msgTarget: 'side'
                  },
                  {
                      xtype: 'textfield',
                      name : 'description',
                      fieldLabel: 'Description',
                      allowBlank: false,
                      msgTarget: 'side'
                  },
                  {
                      xtype: 'combobox',
                      name : 'category',
                      fieldLabel: 'Select Category',
                      store: ["Electronics","Software","Gaming"],
                      queryMode: 'local',
                      value: 'Electronics'
                  },
                  {
                      xtype: 'numberfield',
                      fieldLabel: 'Price',
                      minValue: 0.01,
                      maxValue: 99.99,
                      value: 9.99,
                      name: 'price'
                  }
              ]
          }
      ];
  
      this.buttons = [
          {
              text: 'Save',
              action: 'save'
          },
          {
              text: 'Cancel',
              scope: this,
              handler: this.close
          }
      ];
  
      this.callParent(arguments);
      }
     });
  </code></pre>
  
  <p>//controller</p>
  
  <pre><code>   Ext.define('myApp.controller.ItemMaster', {
     extend : 'Ext.app.Controller',
  
     stores : ['Products'],
     models : ['Product'],
     views : ['ItemList', 'ItemEdit'],
  
     init : function() {
     this.control({
     'container &gt; panel' : {
      render : this.onPanelRendered
     },
     'itemList' : {
      itemdblclick : this.editItem
     },
     'itemList button[action=add]' : {
      click : this.addItem
     },
     'itemEdit button[action=save]' : {
      click : this.updateItem
     }
    });
    },
  
   onPanelRendered : function() {
   //console.log('The panel was rendered');
   },
  
    editItem : function(grid, record) {
    var view = Ext.widget('itemEdit');
    view.down('form').loadRecord(record);
   },
  
   updateItem : function(button) {
    var win = button.up('window');
    var form = win.down('form').getForm();
   //check of the form has any errors
   if (form.isValid()) {
   //get the record 
   var record = form.getRecord();
   //get the form values
   var values = form.getValues();
   //if a new record
   if(!record){
    var newRecord = new myApp.model.Product(values);
    this.getProductsStore().add(newRecord);
   }
   //existing record
   else {
    record.set(values);
   }
   win.close();
   //save the data to the Web local Storage
   this.getProductsStore().sync();
  }
  },
  
  addItem : function(button) {
  var view = Ext.widget('itemEdit');
   }
  });
  </code></pre>
  
  <p>thanks </p>