Results 1 to 8 of 8

Thread: Not Able to access the dom Element

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default Answered: Not Able to access the dom Element

    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

  2. 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.

  3. #2
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    If you include renderTo it will render the component directly to the specified DOM node. This is unnecessary if...

    1. You're rendering a viewport...
    2. OR you're working with a floating component, like a window. They are automatically rendered when you call show...
    3. 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.

  5. #4
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    If you're still having issue, provide a code example so we can better assist you.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  7. #6
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    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.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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.

  9. #8
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

Similar Threads

  1. Access html5 canvas element
    By mjankela in forum Ext 5: Q&A
    Replies: 2
    Last Post: 2 Apr 2015, 12:34 AM
  2. How to Access the XML data into sencha touch UI Element
    By bala7k in forum Ext: Discussion
    Replies: 1
    Last Post: 31 Mar 2012, 1:48 AM
  3. To access a grid element's html
    By Rajat Sharma in forum Ext: Q&A
    Replies: 11
    Last Post: 7 Dec 2011, 8:12 AM
  4. Cant access a DOM element to set its value
    By localhost in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Oct 2008, 1:45 PM
  5. access div element inside Div
    By rajeshin in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 16 Oct 2008, 8:00 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •