View Full Version : what is el and how to get itemId to a panel?

6 Feb 2013, 12:01 AM
?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.)

listeners: {
'render': function(panel) {
panel.el.on('click', function() {

I am using extjs 4.1.1a

6 Feb 2013, 7:15 AM
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:

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.

31 Jul 2014, 3:42 AM
element: 'el' what does this property do ?? i can see this in my project code just after the listeners
{ type:'search',
iconCls: 'save',
listeners: {
click: function (prefix, rec, cfg) {
var tabs = Ext.getCmp("homeTab");
var panel = new Ext.create('view.SearchTab');
tab = tabs.add(panel);
element: 'el'

31 Jul 2014, 6:15 AM
Don't hijack old threads to ask unrelated questions. Post your own question.

The element option is documented here:


It isn't after the listeners, it's part of it.