View Full Version : Using element.set with jsonstore data

3 May 2010, 4:58 AM
Hi folks. I'm new to using extjs, so this is my first post, though I've been lurking in these forums for a few weeks.

I'm basically making an image gallery where I'm trying to change an image in a Viewport using data from a JsonStore. I have an img with id="image". I have an element from JsonStore called img. I can tell I'm getting data properly from the JsonStore, but when I try this:

var el = Ext.get('image');

And check the markup in firebug, it actually says:

<img id="image" src="../../revere/images/{img}'}">

...instead of something like:

<img id="image" src="../../revere/images/imagename.png'}">

Any is there a different way that I should be trying to do this?

3 May 2010, 5:06 AM
Why would you expect that to work? Sounds as though you don't have any relation between the store and the image, you need to hook it up somehow.

3 May 2010, 5:35 AM
I'm using the same store to get the thumbnail image, the image name, etc with no problems.

I'm trying to use what I thought would be a simpler method to change the images in my viewport than I am using to load my images in my panel that has the thumbnails loaded. These thumbnails, as well as other data are being displayed in my thumbnail panel with no problems using data from the jsonstore.

The problem is that the resulting html when using el.set() actually has the string "{img}" instead of the data that I am absolutely positive is stored in that element.

Is there a different way to change the image source other than the method I described or is there a syntax change I can make?

3 May 2010, 5:50 AM
More info:
If I use the {url} element to try to load the thumbnail image that is already working elsewhere on the page, I get similar results as I reported above using el.set().

Here is a screen grab of my Firebug panel to let you see what I mean.
Is this what I should expect to see if I "don't have any relation between the store and the image?"

Is this:


not the proper way to load an image based on json data?

3 May 2010, 6:52 AM
Are you using a template somewhere? Otherwise the use of {img} is completely out of context... By itself it is meaningless to JS. Maybe post some more complete code so we can see how you are trying to use it... In any case, unless you are using a template, you should probably be doing something more like so:

var img = 'image1.jpg';
el.set({src:'../../revere/images/' + img});

3 May 2010, 7:30 AM
Yeah, I see my error in thinking now. I guess I wasn't fully following Evan's answer. I haven't done a ton of JS so I have a double learning curve going on. :)

Let me play based on the info you've given and see what happens.

3 May 2010, 10:42 AM
Ok, (slightly) more educated question this time. :)

Like I said, I have a dataview that is populated with thumbnails, that is named view (original, eh?) this view has store: set to my json data. At this point I can select the thumbnails, I just need the full size image to display in my other dataview.

As a test I created a simple function that gets the selected nodes and prints the length to an item title. So if I click a node, i can tell I have a node selected because the item title changes to 1.

function doSelect(){
var selNode = view.getSelectedNodes();

I just can't seem to get anymore information about the selected node. Which node is selected? What's its id?

I'm using the following template to draw the thumbnails (this code was taken directly from the ext examples).

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',

I thought I would be able to do something like
item2.setTitle(''+selNode.img); and have the name of my image as stored in the store show up as the item2 title.

Thanks for the help so far, hopefully you guys won't get bored with my completely amateur questions.