PDA

View Full Version : Using multiple stores with 1 Model



santif
30 Oct 2011, 9:19 AM
Hi,


I have 3 grid panels with diferent filters for reading the same data. So, I built 3 independent Stores, using 1 unique Model. This model uses localstorage for persistence.
I update (via comet) the model, but the changes are shown only in one grid (the last I defined). What can I do? I'm using ExtJS 4.0.7
Sorry for my english :-)


Thanks in advance!


Santiago

netemp
30 Oct 2011, 10:09 PM
I update (via comet) the model, but the changes are shown only in one grid (the last I defined).

Could you share the code you are having. Also, how are you updating your model? Please post.

santif
31 Oct 2011, 3:56 AM
Thanks netemp for reply. I'm using jQuery CometD client to receive the server push messages, but the model 'update' is purely manual.
Here is the code to reproduce the issue:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../ext-4.0.7/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-4.0.7/ext-all.js"></script>
</head>
<body>


<h1>Grid 1</h1>
<div id="grid1"></div>


<h1>Grid 2</h1>
<div id="grid2"></div>


<script type="text/javascript">


// Sample comet handler (originally invoked by CometD jQuery client)
function sampleCometUpdate(newData) {
SampleModel.load(newData.id, {
success: function(oldData) {
oldData.set('value', newData.value);
oldData.save(); // This change only appears in the second grid :-(
}
});
}


// Async update simulation (for testing purposes only)
setTimeout(function() {
sampleCometUpdate({
id: 1,
value: 500
});
}, 5000);


Ext.onReady(function() {


// THE Model
Ext.define('SampleModel', {
extend: 'Ext.data.Model',
fields: [ 'id', 'name', 'value' ],
proxy: {
type: 'localstorage',
id: 'model-sampledata'
}
});


// Model data initialization (AJAX request)
Ext.Ajax.request({
url: 'sampledata.json', // [{id: 1, name: 'name1', value: 11}, {id: 2, name: 'name2', value: 12}, ...]
success: function(response){
var data = Ext.decode(response.responseText);
Ext.each(data, function(values) {
var sampleModel = Ext.create('SampleModel', values);
sampleModel.save();
});
}
});




// ----------------------------------------------


// Store 1: Show only record with id=1
Ext.create('Ext.data.Store', {
model: 'SampleModel',
storeId: 'store1',
autoLoad: true,
filters: [
{ property: 'id', value: 1 }
]
});


// Grid 1
Ext.create('Ext.grid.Panel', {
store: 'store1',
renderTo: Ext.get('grid1'),
height: 100,
columns: [
{ header: 'Id', dataIndex: 'id' },
{ header: 'Name', dataIndex: 'name' },
{ header: 'Value', dataIndex: 'value' }
]
});


// ----------------------------------------------


// Store 2
Ext.create('Ext.data.Store', {
model: 'SampleModel',
storeId: 'store2',
autoLoad: true
});


// Grid 1
Ext.create('Ext.grid.Panel', {
store: 'store2',
renderTo: Ext.get('grid2'),
height: 150,
columns: [
{ header: 'Id', dataIndex: 'id' },
{ header: 'Name', dataIndex: 'name' },
{ header: 'Value', dataIndex: 'value' }
]
});


});


</script>
</body>
</html>


I attached a screenshot with the results