Can't get HTML Element of menu item?

[justmonkey]

Hi,
I use a menu in toolbar, when i click the menu's items, a BasicDialog will show. Now the question is : I can get menu item like this:


downloadBtn = downloadMenu.items.get('downloadBtn');
downloadBtn.on('click', this.showDialog, this);

But when the Dialog shows, it doen't have FX effects, because Ext.Fx is automatically applied to the Ext.Element interface when included, so all effects calls should be performed via Element.
When i use Ext.get(..), it returns null.


downloadMenu = new Ext.menu.Menu ({
id: 'downloadMenu',
items: [{
id:'downloadBtn',
text: 'Download to Other'
},{
text:'testtest'
}
]
});



var dlBtn = Ext.get('downloadBtn'); // dlBtn is null

Anyone can tell me how to get the HTML Element of menu item, so when dialog shows with FX effects? Thanks.

[Animal]

OK, confusing post, but what I think you're after is animating the show of the dialog from the menu item.

Menu items extend Component which has getEl() which returns the Component's Ext.Element. Animate from that.

[justmonkey]

Sorry,let me reorder the code.


/*toolbar.js*/

downloadMenu = new Ext.menu.Menu ({
id: 'downloadMenu',
items: [{
id:'downloadBtn',
text: 'Download to Other'
},{
text:'testtest'
}
]
});

I get menu item in another js


/*dialog.js*/

var dlBtn = Ext.get('downloadBtn'); // dlBtn is null
downloadBtn = downloadMenu.items.get('downloadBtn'); // downloadBtn is not null, but it's not a HTML Element.
downloadBtn.on('click', this.showDialog, this);

And i try more like this:


var testMenu = downloadMenu.getEl(); // it's normal, not null
var testBtn = downloadBtn.getEl(); // it's also null

[justmonkey]

I did a test in BaseItem.js (all menu item classes extend BaseItem). I added a method test123() in BaseItem.js.


Ext.extend(Ext.menu.BaseItem, Ext.Component, {
...
onRender : ...,

test123: function(){
if (this.el){
return "el is not null";
}else{
return "el is null";
}
}, ...
});

Then i called method test123(), and return "el is null". Who can tell me what happened? Thanks.

[tryanDLS]

Did you look at the HTML in Firebug - has downloadBtn been rendered yet?

[justmonkey]

Did you look at the HTML in Firebug - has downloadBtn been rendered yet?

Thank tryanDLS. Yes, after downloadBtn has rendered, its element would be available. But when it is rendered, its id seemed like a random id, not what i assign... I don't know how to get it, sigh

[jack.slocum]

When downloadBtn is clicked, it will pass you a reference to itself in the handler. You can use that reference to get the element (item.el or item.getEl()) and at that point it will definitely be rendered.


downloadBtn.on('click', function(btn){
this.showDialog(btn.getEl()); // you want to pass a reference to el?
}, this);

[justmonkey]

Thank jack, thank all:) My problem has been resolved. Jack reminds me, except what he said, i also modify one code



downloadDialog.show(btn.dom); //before modify
downloadDialog.show(btn.getEl().dom); //after modify this, FX effect appear