PDA

View Full Version : JsonStore keeps appending to itself, i want it to replace the records



sharkcap
27 Feb 2010, 4:45 PM
I am somewhat new to EXT and trying to get more familiar.
after looking at an example at http://www.easyext.co.uk/examples/simplegallery/
i am using coldfusion and trying to display images similarly to this example. However in my own site, I am trying to change the display of images from selecting from various tree nodes.

Regardless, when using this code below, as i click on each tree node, the code below activates and results in appending the new images (generated json for selected tree node) below the previous list of images. I want it to replace, not append.

var xd = Ext.data;

var chooseAlbum = "";
var albumArray;

var store = new Ext.data.JsonStore({
url: '/members/img/getImagesJSON.cfm',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
store.reload();

/*store.load({
params : {
action : 'showAlbum'
}
});
*/

mitchellsimoens
27 Feb 2010, 5:58 PM
wrap your code in the code tags or select your code and hit the '#' tool.

Also, when you load() or reload(), check out the add boolean option... that is go to the Docs, go to your JsonStore and scroll down to the load method... expand it and read.

***HINT***
add is in bold!

sharkcap
28 Feb 2010, 7:13 PM
Thanks for the your time and your hint.
I have read some more of the documentation for jsonstore and load and add, but wasn't exactly sure how to implement that and wasn't successful finding an example online that uses add:false
From what i took from reading somewhere, the default value for add is false anyways. afterall I am trying to ensure the previous records are NOT cached, not add to them.

this code is executed when i click each node of a tree


var store2 = new Ext.data.JsonStore({
url: '/members/img/getImagesJSON.cfm',
root: 'images',
id: 'myStore',
disableCaching:false,
autoLoad: false,
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
//store2.reload(false);
//store2.load({add:false});
//store2.reload({add:false});
store2.load({
params : {
action : 'showAlbum'
},
add:false
});





var thumbview = new Ext.DataView({
store: store2,
tpl: tpl,
autoHeight:true,
multiSelect: false,
singleSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display right now.',
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
}
})
Until i get this working, this json is hard-coded in my /members/img/getImagesJSON.cfm file:

{"images":[{"name":"kids_hug<cfoutput>#randrange(1,333)#</cfoutput>.jpg","size":2476,"lastmod":1265667056000,"url":"images\/thumbs\/kids_hug2.jpg"},{"name":"sara_smile.jpg","size":2410,"lastmod":1265667056000,"url":"images\/thumbs\/sara_smile.jpg"},{"name":"up_to_something.jpg","size":2120,"lastmod":1265667056000,"url":"images\/thumbs\/up_to_something.jpg"}]}

mitchellsimoens
28 Feb 2010, 7:59 PM
Well you could always add a beforeload listener and remove all first.


var store2 = new Ext.data.JsonStore({
url: '/members/img/getImagesJSON.cfm',
root: 'images',
id: 'myStore',
disableCaching:false,
autoLoad: false,
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}],
listeners: {
beforeload: function(store) {
store.removeAll();
}
}
});
store2.load({
params : {
action : 'showAlbum'
},
add:false
});

saadkhan
28 Feb 2010, 8:27 PM
Simply add a new llist of data into reader

[/CODE]
ar mygrid = Ext.getCmp('grid1');
var colModel = grid.getColumnModel();

var tmpConfig = colModel.config;
tmpConfig.push({"header":"Price","dataIndex":"price","width":200,"editor":false});

colModel.setConfig(tmpConfig, true);
mygrid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(tmpConfig));
[/CODE]

It will make your reader like refreshed with new data!

sharkcap
1 Mar 2010, 5:55 PM
I thought that idea of using a beforeload listener would have fixed it, but it didn't affect it at all. I played around some with the disableCaching and still no luck


var store2 = new Ext.data.JsonStore({
url: '/members/img/getImagesJSON.cfm',
root: 'images',
id: 'myStore',
disableCaching:true,
//autoLoad: false,
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}],
listeners: {
beforeload: function(store2) {
store2.removeAll();
}
}
});
store2.load({
params : {
action : 'showAlbum'
}
});
console.log(store2);

sharkcap
1 Mar 2010, 8:24 PM
when i look at the working example, i see it generates


<div id="thumbnails">
+<div id="ext-gen7" style="height: auto;">
</div>however my generated code looks like this:


<div id="thumbnails">
+<div id="ext-comp-1060" style="height: auto;">
+<div id="ext-comp-1068" style="height: auto;">
</div>this spawns two questions:
1. what is the difference between ext-gen and ext-comp?
2. is my problem because of my auto-generated ID
3. should i not be using a jsonstore?