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
http://www.mysamplecode.com/2012/06/extjs-local-storage-example.html
code:
<!DOCTYPE html>
<html>
<head>
<title>ExtJs 4 Local Storage Example</title>
<link rel="stylesheet" type="text/css"
href="extjs-4.0.1/resources/css/ext-all.css">
<script type="text/javascript" src="extjs-4.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'myApp',
appFolder: 'app',
controllers: [
'ItemMaster'
],
//data container
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
height: 250,
width: 500,
margin: '5 5 5 5 ',
layout: 'fit',
items: [
{
xtype: 'itemList'
}
]
});
}
});
// model
Ext.define('myApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
'itemNumber',
'description',
'category',
'price',
]
});
// store
Ext.define('myApp.store.Products', {
extend: 'Ext.data.Store',
model: 'myApp.model.Product',
autoLoad: true,
proxy: {
type: 'localstorage',
id : 'myProxyKey'
}
});
//view
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);
}
});
// form for adding and editing
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);
}
});
//controller
Ext.define('myApp.controller.ItemMaster', {
extend : 'Ext.app.Controller',
stores : ['Products'],
models : ['Product'],
views : ['ItemList', 'ItemEdit'],
init : function() {
this.control({
'container > 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');
}
});
thanks
To use the same store, all you need to do is specify the same store for the chart
Working example http://jsfiddle.net/bucg7/5/
You also should understand that a store is being magically created in the background by ExtJS, and it’s being assigned the global id of ‘Products’.
Notice that the chart rerenders as you sort your grid. If you don’t want that behavior, you need two separate stores, where the store for the chart listens to changes from the grid.