View Full Version : How to get the HTML of component

2 Sep 2010, 2:27 PM
Hi all!

I am creating a component in the code, for example:

... new Ext.Toolbar ...But, there is a point in my code that i want to get the HTML code generated by the ExtJS to build this component. There is some
object.getHTML() or something like that?


2 Sep 2010, 3:55 PM
//general example

Ext.get('element id'); //returns Ext.Element that encapsulate a dom element with that id
Ext.fly('el id'); //returns Ext.Element (flyweight object)
//for the toolbar element

toolbar = new Ext.Toolbar({..});
el = toolbar.getEl(); //Returns the Ext.Element which encapsulates this Component.
console.log('toolbar: ',el);
console.log('toolbar dom el: ',el.dom); //dom property
//another element inside toolbar configured with ItemId: 'blah'

blah = toolbar.getComponent('blah'); //returns an Ext.Component inside the toolbar with itemId property = 'blah'
el2 = bla.getEl(); //return Ext.Element..
etc etc..

3 Sep 2010, 1:18 AM
You could use:

var html = component.getEl().dom.outerHTML;
But what do you need this information for?

3 Sep 2010, 3:46 AM
var html = component.getEl().dom.outerHTML;
outerHTML (http://msdn.microsoft.com/en-us/library/ms534310.aspx) is a non-standard Internet Explorer property of an element!! It's no supported like innerHtml by Firefox for example..
zendrael wants the html generated for the component. I think that the dom property of Ext.Element contains all the logic that zendrael search, like innerHtml..

3 Sep 2010, 4:08 AM
I know, but I don't even see why the OP would want this...

3 Sep 2010, 4:15 AM
Only God knows that :)

3 Sep 2010, 11:12 AM
Hi all!

Yes, the dom.innerHTML of the object gives me exactly what i wanted. The reason is that i want to work with some objects in some unusual places of the interface (i will post a link of it when worked right).

The question now is: is there a way to get that information if the object is not in the dom yet?

An Example:

this.barra = new Ext.Toolbar({ id:'topbarra'...});

this.wnd = new Ext.Window({
title : 'testing...'
//,tbar : this.barra
,listeners : {
activate: function(){
here is what i want, but not works if the "tbar" is commented
alert( Ext.getCmp('topbarra').getEl().dom.innerHTML );

});//end window

I hope you understand me.


3 Sep 2010, 3:19 PM
how should you fetch dom when there is nothing rendered? Use the proper listener, eg afterrender