1. #1
    Ext User
    Join Date
    May 2009
    Posts
    3
    Vote Rating
    0
    zendrael is on a distinguished road

      0  

    Default How to get the HTML of component

    How to get the HTML of component


    Hi all!

    I am creating a component in the code, for example:
    Code:
    ... 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
    Code:
    object.getHTML()
    or something like that?

    Thanks!

  2. #2
    Sencha User 44gatti's Avatar
    Join Date
    Jul 2009
    Location
    Somew(h)ere in Rome
    Posts
    26
    Vote Rating
    0
    44gatti is on a distinguished road

      0  

    Red face There are many ways for retrieve and manipulate page elements..

    There are many ways for retrieve and manipulate page elements..


    //general example
    PHP Code:
    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
    PHP Code:
    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'
    PHP Code:
    blah toolbar.getComponent('blah'); //returns an Ext.Component inside the toolbar with itemId property = 'blah'
    el2 bla.getEl(); //return Ext.Element.. 

    etc etc..


  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  4. #4
    Sencha User 44gatti's Avatar
    Join Date
    Jul 2009
    Location
    Somew(h)ere in Rome
    Posts
    26
    Vote Rating
    0
    44gatti is on a distinguished road

      0  

    Exclamation Condor..

    Condor..


    var html = component.getEl().dom.outerHTML;
    outerHTML 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..

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I know, but I don't even see why the OP would want this...

  6. #6
    Sencha User 44gatti's Avatar
    Join Date
    Jul 2009
    Location
    Somew(h)ere in Rome
    Posts
    26
    Vote Rating
    0
    44gatti is on a distinguished road

      0  

    Default


    Only God knows that

  7. #7
    Ext User
    Join Date
    May 2009
    Posts
    3
    Vote Rating
    0
    zendrael is on a distinguished road

      0  

    Default it works!

    it works!


    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:

    PHP Code:
    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
                ***/
                
    alertExt.getCmp('topbarra').getEl().dom.innerHTML );
            }
        }
            
    });
    //end window 
    I hope you understand me.

    Thanks!

  8. #8
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    how should you fetch dom when there is nothing rendered? Use the proper listener, eg afterrender
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Similar Threads

  1. does the textarea component support html?
    By superbinary in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 25 Jul 2010, 7:32 AM
  2. Is there a way to display html to an extjs component??
    By Akamy2kidsmom in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 5 May 2009, 11:35 AM
  3. html property in the component.
    By shaque in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 5 Nov 2007, 4:36 AM
  4. Switch existing html component to ext component
    By harishns in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 3 Sep 2007, 12:58 AM

Thread Participants: 3