View Full Version : How do I fetch the id of a "div"?

22 May 2007, 2:07 PM
I would really appreciate some help on this.

I try to fetch my id like below in my js.

showBtn = Ext.get('div.show-dialog-btn');

But it doesn't seem to do that in the case below

<div dojoType="FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"

<div dojoType="FisheyeListItem" id ="show-dialog-btn" iconsrc="test.JPG" caption="test">

But if I replace the code above with

<img src="test.JPG" id="show-dialog-btn" width='50' height='50'>

it works. Is there another command for getting an id for a div?


22 May 2007, 2:28 PM
If you know the id, you just do Ext.get(yourid), don't prepend with 'div.'

22 May 2007, 2:39 PM
Since you are transforming the divs with Dojo stuff, it's possible that the output is not what you're expecting. Have you viewed the generated source in Firebug? If the id is there in the DOM (and is not duplicated), Ext.get will work.


Is that an actual config property?? ;)

24 May 2007, 1:50 PM
I dropped the DOJO thing and instead use normal images. I thought that I would be able to get the id's now, but no :-/

The images are looped into my page, and they are given unique id's from my that (see below). I tried to test it for

showBtn = Ext.get('show-dialog-btn1');

but nu success.

[CODE]function showimages(im, nm, pd) {
var pictures = document.getElementById("pictures");
pictures.innerHTML ="</br></br>";
for (var i =0; i < im.length; i++) {
pictures.innerHTML += "</br></br><img src='" + im[i] +
"' caption='' onMouseover='get_match(" +pd[i] + ")'; id='show-dialog-btn" + i + "' width='50' height='50'> <br/><h3>Detta

24 May 2007, 2:14 PM
My initial reaction is that you should probably spend a little time looking through Ext to figure out what all is available to you. Your code would be much easier to write and maintain using the Ext API. For example, instead of:

var pictures = document.getElementById("pictures");

try using:

var pictures = Ext.get("pictures");

which returns an Ext.Element. To access the DOM node like you are currently, you can simply do pictures.dom. However, you'll find that using an Element instead of a DOM node is usually much better. Look at the Element API (http://extjs.com/deploy/ext/docs/output/Ext.Element.html) for all the different things that can now be done with your pictures variable (Element.update would replace manually overwriting the innerHtml for example).

For the looping section, I would look at Ext.Template (http://extjs.com/deploy/ext/docs/output/Ext.Template.html) which makes it much easier to construct html fragments.

I'm not sure what's wrong with your existing code. You really should try inspecting the generated source in Firebug to see if everything is actually rendering as expected. It will also tell you any JS errors that you may be getting. Without that info, we're just guessing.

24 May 2007, 2:15 PM
1. You're building bogus html - </br> s/b <br />
2. Rather than trying to inline an event handler for every image, do it with Ext and put it on the div, then determine which image you're over.

Ext.get('pictures').on('mouseover', getmatch...);
3. Verify that your generated HTML is correct via Firebug

25 May 2007, 3:01 AM
I have tried to use the commands you recommend, but it doesn't work.
Also tried to debug with firebug, but that was greek to me.

I have added a button from the example, "hello world" that works, so I must have imported the right stuff. But it's no good on my pictures. I thought if someone was interested, the site is here: http://www-und.ida.liu.se/~roblj689/www/index.php/application/index/

(Don't press the hello world button at first, somethings wrong with that right now... use the menu to view the pictures, the menupictures are to be replaced)

If someone came up with a solution for catching the loaded pictures id's and making the dialog pop up on each of them, I would be forever greatful.