PDA

View Full Version : How to get Components' div id



BlueSkye
25 May 2010, 11:07 AM
Hi,
I'm a beginner in ExtJS Development, so please forgive me if my questions are silly! (forgive me for my bad english, too ;))

I've searched in ExtJS API's Documentation and all over google and this forum, but I haven't found anything.

I wanted to ask if somebody knew if there's some way to get the Id of the auto-generated <div> elements which incapsulates the ExtJS components when you create a new one (for example, a combobox).

The auto-generated ids for the <div>s are something like "ext-gen-xxx".

Thanks!

jtpacheco
25 May 2010, 12:27 PM
While I'm not sure there's a way, I must ask why you are trying to get auto-generated id's of components, when you can easily set them yourself and access them later using Ext.getCmp(<id goes here>)...

In order for you to get the id of a component, you need to be able to get the component. You normally can't get the component unless you use Ext.getCmp(<id>) which need the id, and you can't get the id unless you have the component, and you can't get the component unless you have the id, etc.

Unless, of course, you manually created each of your components as an individual object, in which case you could just use the reference of the object to get the id...but then you wouldn't need the id, would you?

So it all boils down to this: why do you want the id?

steffenk
25 May 2010, 12:51 PM
Each component has an id property. If you want to reference to your component, configure the id property.
Every not configured id property will be autogenerated (ext-gen-xyz)

BlueSkye
26 May 2010, 4:42 AM
While I'm not sure there's a way, I must ask why you are trying to get auto-generated id's of components, when you can easily set them yourself and access them later using Ext.getCmp(<id goes here>)...

In order for you to get the id of a component, you need to be able to get the component. You normally can't get the component unless you use Ext.getCmp(<id>) which need the id, and you can't get the id unless you have the component, and you can't get the component unless you have the id, etc.

Unless, of course, you manually created each of your components as an individual object, in which case you could just use the reference of the object to get the id...but then you wouldn't need the id, would you?

So it all boils down to this: why do you want the id?

I wanted to incapsulate components inside a <div> element. I tried with autoEl, renderTo e applyTo configs, but I didn't manage... I can't understand what these configs do exactly.

Then, using firebug, I noticed that lots of components are inside an auto-generated <div>, so I tried to get those auto-generated <div>s' Ids in order to be able to reference to them.

I wanted to resize different components through the divs that contains them, but Ext.Resizable gives me some trouble.
Maybe I'm following a wrong approach?

I guess I should try using Ext.Resizable with Ext.getComp(<id>) or some other Ext class rather than a <div> element...

(Thanks for the answers!)

Condor
26 May 2010, 5:21 AM
Do I understand correctly:
Do you want to render an Ext component inside an existing div (use renderTo), but the component should be resized to fit inside the div?
In that case I recommend the FitToParent user extension.

jtpacheco
26 May 2010, 5:28 AM
Hmm. Some components don't have a resizable property, so you need to be sure that the component you want to resize can actually be resized. Most of the container components are resizable (some panels, window, etc).

Personally, I've never used autoEl, so can't recommend for or against it. "renderTo : <name>" simply instructs the DOM to "render this component to a div by the id of <name>. Alternatively, you can put "renderTo : document.body" which will render it to the "body" area of your page. applyTo is a way of applying the properties of an object to an existing object/element/div. While this could be what you're looking for, it may not actually give you the id you want for the component.

To set an id, all you need to do is put "id : <your id here>" in the component's config. That's all! Easy as pie (or cake, if you prefer). Then to get that component back, just use "Ext.getCmp(<that same id>)" and now you have a reference to that component.

Now, resizable is a config option of a component (and is set by "resizable : <true or false>", not a property. The difference is that you can only modify/apply config options in the component's "constructor," so to speak, while properties can be set mostly anywhere. So first, you need to make sure that the component you are using can, in fact, be resized.

However, this "resizable" option really only applies to giving the user the ability to resize the component on the page, not to allow the developer (you) to procedurally resize the component in code. If you as a developer want to resize a component, you are better off not worrying about the resizable option, and instead looking for setWidth(int) and setHeight(int) or setSize(width, height), and that should take care of your sizing needs.



So, to wrap up... Let's say you have a page that has the following in it:

<body>
<div id="testPanel"/>
<div id="testButton"/>
</body>

and in ext, you have a button and a panel that you wish to render. All you need to do is put "renderTo: "testPanel"" in you panel's config, and tada! the panel will render itself at the div with the id of "testPanel." However, I'm not sure if this will allow you to get the component by typing Ext.getCmp("testPanel"), so to be safe, you should put "id : "idTestPanel"" in there as well. (I don't like having my ids and divs and stuff with the same name). Now, you'll be able to call Ext.getCmp("idTestPanel"), and you'll have your panel!

Now say somewhere later in your code, you need to change the size of your panel. Simple!
<some function>
Ext.getCmp("idTestPanel").setSize(100, 200);
<end function>Tada! Now your panel is a 100 x 200 panel, still rendered to the same place. Obviously you'll have some layout issues if there are many components nearby, but that's beyond the scope of this simple example.

So, there you have it! The problem with trying to use auto-generated id's is that the page doesn't always give the same id to the same component, and whenever you add a component to your code, it may mess up the order, and cause different id's to different components. One more thing: if you have components nested inside your panel, there are two ways of getting them. You can loop through panel.items and compare each component's name (or some other property) with what you want...or you can give each component an id, and rest easy knowing you'll be able to get that component whenever you need to.

I've actually gotten in the habit of giving every component an id, even if I'm not sure I'll need to access it later.

BlueSkye
26 May 2010, 1:46 PM
Do I understand correctly:
Do you want to render an Ext component inside an existing div (use renderTo), but the component should be resized to fit inside the div?
In that case I recommend the FitToParent user extension.

Thanks for the advice! That was not what I meant exactly, but that'll be very useful to me; I think I'll try it.


Hmm. Some components don't have a resizable property, so you need to be sure that the component you want to resize can actually be resized. Most of the container components are resizable (some panels, window, etc).

Personally, I've never used autoEl, so can't recommend for or against it. "renderTo : " simply instructs the DOM to "render this component to a div by the id of . Alternatively, you can put "renderTo : document.body" which will render it to the "body" area of your page. applyTo is a way of applying the properties of an object to an existing object/element/div. While this could be what you're looking for, it may not actually give you the id you want for the component.

To set an id, all you need to do is put "id : " in the component's config. That's all! Easy as pie (or cake, if you prefer). Then to get that component back, just use "Ext.getCmp()" and now you have a reference to that component.

Now, resizable is a config option of a component (and is set by "resizable : ", not a property. The difference is that you can only modify/apply config options in the component's "constructor," so to speak, while properties can be set mostly anywhere. So first, you need to make sure that the component you are using can, in fact, be resized.

However, this "resizable" option really only applies to giving the user the ability to resize the component on the page, not to allow the developer (you) to procedurally resize the component in code. If you as a developer want to resize a component, you are better off not worrying about the resizable option, and instead looking for setWidth(int) and setHeight(int) or setSize(width, height), and that should take care of your sizing needs.



So, to wrap up... Let's say you have a page that has the following in it:






and in ext, you have a button and a panel that you wish to render. All you need to do is put "renderTo: "testPanel"" in you panel's config, and tada! the panel will render itself at the div with the id of "testPanel." However, I'm not sure if this will allow you to get the component by typing Ext.getCmp("testPanel"), so to be safe, you should put "id : "idTestPanel"" in there as well. (I don't like having my ids and divs and stuff with the same name). Now, you'll be able to call Ext.getCmp("idTestPanel"), and you'll have your panel!

Now say somewhere later in your code, you need to change the size of your panel. Simple!

Ext.getCmp("idTestPanel").setSize(100, 200);
Tada! Now your panel is a 100 x 200 panel, still rendered to the same place. Obviously you'll have some layout issues if there are many components nearby, but that's beyond the scope of this simple example.

So, there you have it! The problem with trying to use auto-generated id's is that the page doesn't always give the same id to the same component, and whenever you add a component to your code, it may mess up the order, and cause different id's to different components. One more thing: if you have components nested inside your panel, there are two ways of getting them. You can loop through panel.items and compare each component's name (or some other property) with what you want...or you can give each component an id, and rest easy knowing you'll be able to get that component whenever you need to.

I've actually gotten in the habit of giving every component an id, even if I'm not sure I'll need to access it later.


First of all, thanks for the RICH answer!
My goal was to resize both the component and the <div> that contains it ( autogenerated <div> or a <div> that I can specify in renderTo:) using Ext.Resizable class.

Anyway, your answer helped me making some "order" in my mind, althought I still can't undestand what does applyTo config makes...

I think I'll try something out and then maybe post some code; maybe I need to make some order in my thoughts (I'm new to this FrameWork, and my ideas are still a bit confused!).

Thanks to you all ;) (A special Thanks to jtpacheco)

jtpacheco
26 May 2010, 2:45 PM
No problem, always glad to help.

Go ahead and try some stuff out, the forums will always be here (usually) waiting to help.