PDA

View Full Version : Getting DOM element from a ExtJS component



roshpr
27 Nov 2012, 4:24 AM
Hi,
I'm new to ExtJS & I'm working on a project where I nee to upgrade Extjs from 2.0 version to 3.4.
The application has used DOM elements to manipulate many of the ExtJS components. Now while upgrading I notice that many of the ExtJS components like ComboBox, Menu does not have the el property defined and hence we are unable to get the DOM of these elements using getEl method, this is breaking the application in many places.

Error : combo.getEl() is undefined

I would like to know whether there is any standard way/api in ExtJS where we can fetch the DOM of any ExtJS component.

willigogs
27 Nov 2012, 4:41 AM
getEl() is still suppported in 3.4, therefore a code example showing this not working would probably help diagnose any issues :)

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.ComboBox-method-getEl

(http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.ComboBox-method-getEl)e.g:
http://jsfiddle.net/Whinters/QHzCb/

roshpr
28 Nov 2012, 4:21 AM
Hi below is the code snippet that we are using for menu.

commitMenuItem = new Ext.menu.Item({
id:'topSbMenuCommit',
text: 'Commit'
});


commitMenu= new Ext.menu.Menu({
id:'commitMenu',
items: [commitMenuItem]
});


var mnu = Ext.menu.MenuMgr.get(ID);
var id = mnu.getEl().dom; // In Ext3.4 it is breaking here
var i = 0;
mnu.items.each(function(item) {
id.childNodes[1].childNodes[i].childNodes[0].id = item.getId();
i++;
});

I'm attaching the firebug image for break point & menu object info. Are we missing something here. The code was perfectly fine for ExtJS 2.0.

40414

willigogs
28 Nov 2012, 5:09 AM
Hmm, I've never encountered this before, but the problem seems to stem from the menu not being rendered until clicked on - therefore the menu and items aren't assigned elements until this takes place.

I thought adding the forceLayout: true config to the menu would resolve this, but that wasn't the case.

The only workaround I've found so far is to explicitly call the menu to render before populating the ID from the el.dom.

Something like:


var mnu = Ext.menu.MenuMgr.get(ID);
if(!mnu.rendered) {
mnu.render()
}
var id = mnu.getEl().dom;