Customize ext-gen id auto assigned by Extjs to any DOM element

Question

Is there any way to customize these 'ext-gen' ids which are auto assigned by extjs to the html DOM elements created. I want to add some custom events to some DOM elements and for that I need there ids, So that I can use those elements by their ids like: Ext.get('id') or Ext.cmp('id') etc. As the 'ext-gen' ids are auto generating & dynamically changing on each page refresh/reload, I'm unable to get the Id of any Html DOM element in order to add some custom events. I'm using Extjs3 and PHP(custom frame work) in my project.

Please help me with this. Thanks in advance :)

Answer 1

if you use id so what happen if you open to two panels so it not recommended to use , use item id instead

// you can use like this to add id at the time of creation

var c = new Ext.panel.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
    {
        itemId: 'p1',
        title: 'Panel 1',
        height: 150
    },
    {
        itemId: 'p2',
        title: 'Panel 2',
        height: 150
    }
]
})
el = Ext.getCmp( 'p1' );
console.log(el);

for more info visit blog http://softdevbuilttolast.wordpress.com/2012/06/20/extjs-avoid-using-the-id-property-unless-you-have-to/