1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    20
    Vote Rating
    0
    venkateshwar is on a distinguished road

      0  

    Default Answered: what is el and how to get itemId to a panel?

    Answered: what is el and how to get itemId to a panel?


    In my code there is some `el`.. what does it mean? please explain clearly.. I am new. and how to get `ItemId` of the panel? (I tried getItemId() like var itemId = panel.body.getItemId(), didn't work.)


    Code:
        listeners: {
                       'render': function(panel) {
                           panel.el.on('click', function() {
                               panel.body.setStyle('borderColor','red');
                           }
                       }
                   }

    I am using extjs 4.1.1a

  2. When a component is rendered a lot of DOM nodes are created. While this varies significantly between components, one thing that stays the same is that they always have an outermost node. Officially this outermost HTML node (element) can be accessed via the getEl method but in practice many people access it directly via the el property.

    The body of a panel is similar to el in that it is a reference to an element. The body element is where child items of the panel will be rendered. The body element is a child of the el element. It is important to realise, however, that the body is not a component in its own right.

    If you inspect the DOM in your browser you'll be able to see these DOM nodes. Both will be divs. The el will have the same id as the panel and the body will have that same id with the suffix '-body'. Note that id should not be confused with itemId, they are similar but very much distinct values.

    ExtJS usually wraps DOM nodes in its own Ext.dom.Element class. The value of el and body will be instances of this wrapper rather than direct references to the underlying HTMLElement.

    To grab your panel's itemId you could just use:

    Code:
    var itemId = panel.getItemId();
    However, as you'll see from the docs, that will fall back to returning the id if there is no itemId. If you don't want that then just access the itemId directly as a property.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    When a component is rendered a lot of DOM nodes are created. While this varies significantly between components, one thing that stays the same is that they always have an outermost node. Officially this outermost HTML node (element) can be accessed via the getEl method but in practice many people access it directly via the el property.

    The body of a panel is similar to el in that it is a reference to an element. The body element is where child items of the panel will be rendered. The body element is a child of the el element. It is important to realise, however, that the body is not a component in its own right.

    If you inspect the DOM in your browser you'll be able to see these DOM nodes. Both will be divs. The el will have the same id as the panel and the body will have that same id with the suffix '-body'. Note that id should not be confused with itemId, they are similar but very much distinct values.

    ExtJS usually wraps DOM nodes in its own Ext.dom.Element class. The value of el and body will be instances of this wrapper rather than direct references to the underlying HTMLElement.

    To grab your panel's itemId you could just use:

    Code:
    var itemId = panel.getItemId();
    However, as you'll see from the docs, that will fall back to returning the id if there is no itemId. If you don't want that then just access the itemId directly as a property.

Thread Participants: 1

Tags for this Thread