PDA

View Full Version : Not Able to access the dom Element



AJAIN32
17 Jun 2015, 12:06 PM
Hi All,

I am trying to create multiple instances of a extjs class. for example i have define one class Class1 having multiple components(containers,grid,textboxes etc.) in it. Now there are two places where i am using that, one by the "xtype" and that is my main window and second by creating an object of the class and adding it to a container available in another window.

when i am trying to get the dom elements of first object ( obj1.getEl()) it is returning me the proper object and when i am trying to get the dom elements of second object (obj2.getEl()) - it is returning "undefined".
It should return the dom elements as i am able to see the view of that class in second window, but i am not sure what i am missing here. Any suggestion ???

Thanks,
Ankit

AJAIN32
18 Jun 2015, 12:05 PM
I searched for the issue, this indicates that the element is not rendered yet, when i passed "renderTo : 'Ext.getBody()' " configuration it is providing the expected object on obj.getEl().

I have one doubt in that - if the component is rendering in the window then it's dom elements should exist ? and if i am using this statement (renderTo : 'Ext.getBody()' ) with each component i am rendering, it will not cause any issue ? Any suggestions ?

Thanks,
Ankit

skirtle
18 Jun 2015, 6:11 PM
If you include renderTo it will render the component directly to the specified DOM node. This is unnecessary if...


You're rendering a viewport...
OR you're working with a floating component, like a window. They are automatically rendered when you call show...
OR you're adding the component to a container.


The vast majority of cases are covered by one of the above scenarios, so renderTo is usually not needed. If you're not falling into one of these cases you'll need to render the component explicitly, either using renderTo or by calling the render method.

tristan.lee
19 Jun 2015, 5:51 AM
If you're still having issue, provide a code example so we can better assist you.

AJAIN32
19 Jun 2015, 6:12 AM
Thanks for your response,

Yes, I am adding the component to one of the container, and i am getting undefined with obj.getEl() method, that's why i have written "rederTo: Ext.getBody()" in my code while creating the object.

for example - I have a class classA, which is being used in multiple views

Ext.define('myapp.classA',{
// some confing values
})

and i have one class overriding the "Ext.window.Window" in which i am using one container for the components i will add dynamically.

Ext.define('myapp.classB',{
overrides : 'Ext.window.Window',
..
..
{
xtype : 'container',
items : [
// adding the classA object dynamically and adding it to this container
]
}
});

i am creating instance of ClassA by -
var objClassA = Ext.create('myapp.classA');
or
var objClassA = Ext.create('myapp.classA', {
renderTo : 'Ext.getBody()'
})

ClassB view is being rendered as a pop up window, so adding any components(objClassA) in this window do we need to write "renderTo" configuration to get the dom elements ?

Thanks,
Ankit

tristan.lee
19 Jun 2015, 12:08 PM
Thanks for the explanation. Unfortunately, without seeing your actual code sample, it's not easy to define why you are receiving the error. Please provide some actual code in this post or as a fiddle.

skirtle
19 Jun 2015, 2:51 PM
Ext.define('myapp.classB',{
overrides : 'Ext.window.Window',

Probably unrelated but this is not the correct way to extend a class. You should use extend, not overrides. overrides is used for patching existing classes.


ClassB view is being rendered as a pop up window, so adding any components(objClassA) in this window do we need to write "renderTo" configuration to get the dom elements ?

No, but it still won't be rendered until the window is rendered. If you need to force rendering it's the window you need to render, not the child item.

AJAIN32
21 Jun 2015, 7:12 PM
Thanks a lot tristan & skirtle for the explaination,

I am rendering the window by .show method so i think dom elements of the window is being rendered. I wanted to understand the concepts of - how the rendering of dom elements happens in Ext js. I will check it again and try to reproduce it in js fiddle.

Thanks,
Ankit