Can I use a localstorage as the proxy for a grid's store?

[dOrduna]

Hi there! I'm trying to make a shopping cart demo. I want the user to be able to pick products by writing their name in a combobox and on select, the product has to be added to a grid where it's info is displayed and the user can edit the quantity by clicking on the grid.

The combobox part is already done, what I need help with is the grid. I thought I could use a Store with a localstorage proxy and then pass it to the grid. Something like this:


var productosLocalStore = Ext.create('Ext.data.Store', {
fields: ['id', 'producto'],
proxy: {
type: 'localstorage',
id: 'productosLocal'
}
});

var productosGrid = Ext.widget('grid', {
title: 'Productos',
store: productosLocalStore,
columns: [{
header: 'Nombre',
dataIndex: 'nombre',
flex: 1
}, {
header: 'Precio de Compra',
dataIndex: 'precioCompra',
renderer: 'usMoney',
flex: 1,
}]
});



Then when an item is selected from the combobox, this function is called:


function agregarProducto(combo, records, eOpts) {
productosLocalStore.add({producto: JSON.stringify(records[0].data)});
productosLocalStore.sync();
}


So when I run my code and select an item from the combobox, I see this in my Local Storage section using chrome's dev tools: Key: productosLocal-1, Value: {"id":1,"producto":"{\"id\":2,\"nombre\":\"Coca-Cola\",\"precioCompra\":6,\"precioVenta\":9,\"cantidad\":1}"}

And nothing gets added to the grid of course. I need a tip for making the grid read the JSON value stored locally or a suggestion for a different approach to my problem please! Any thoughts will be appreciated. Thanks in advance!

[mitchellsimoens]

The dataIndex in your columns don't match what your store is using. Why are you encoding an object into the producto field?

[dOrduna]

I'm encoding the selected item to store it using the localstorage proxy, because (as I understand) it only accepts key/value pairs, doesn't it? The reason why the dataIndex in my columns don't match is exactly my problem, I don't know how to access the encoded object from my grid. If you look closely, the encoded object has the data belonging to the dataIndexes: 'nombre' and 'precioCompra'.