1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    Answers
    2
    lastevilstanding is on a distinguished road

      0  

    Default Answered: How to get the rendered HTML of a component.

    Answered: How to get the rendered HTML of a component.


    Hi all,

    Is there anyway to get the html code rendered by Ext engine in displaying a component.

    Thanks in advance.

  2. After render it possible to see the created html

    Code:
    component.getEl().dom.innerHTML;

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    After render it possible to see the created html

    Code:
    component.getEl().dom.innerHTML;

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    Answers
    2
    lastevilstanding is on a distinguished road

      0  

    Default


    I am writing this getEl method on a Ext.form.FieldSet, But it is saying the method is undefined.prob.jpg

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Are you calling the function before or after render? The element is only available after render.

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    Answers
    2
    lastevilstanding is on a distinguished road

      0  

    Default


    after render only I am calling the function.

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    show me code then

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    Answers
    2
    lastevilstanding is on a distinguished road

      0  

    Default


    Ext.define('LNM.view.newAccount.NewAccountForm' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.NewAccountForm',
    title:'Create New Account',
    frame: true,
    bodyStyle: 'padding:15 15 15 15',
    autoScroll: true,
    height:400,

    items: [{
    xtype: 'fieldset',
    title: 'Estate Information',
    collapsible: true,
    layout: 'anchor',
    anchor: '100%',
    items:[{
    xtype: 'textfield',
    anchor:'30%',
    labelWidth: 100,
    fieldLabel: 'Estate Location',
    name:'estateLocation',
    flex: 1
    },{
    xtype: 'textfield',
    anchor:'30%',
    labelWidth: 100,
    fieldLabel: 'Estate Officer',
    name:'estateOfficer',
    flex: 1
    },{
    xtype: 'textfield',
    anchor:'30%',
    labelWidth: 100,
    fieldLabel: 'Estate Assistant',
    name:'estateAssistant',
    flex: 1
    },{
    xtype: 'textfield',
    anchor:'30%',
    labelWidth: 100,
    fieldLabel: 'Estate Comments',
    name:'estateComments',
    flex: 1
    }]
    },{
    buttonAlign: 'center',
    buttons: [{
    text: 'Reset',
    handler: function() {
    this.up('form').getForm().reset();
    }
    }, {
    text: 'Submit',
    formBind : true,
    id:'newaccountSubmitButton'
    }]
    }], // End of CallTrackForm items




    initComponent: function() {
    this.callParent(arguments);
    }
    });

    This is my panel.

    var accountPanel = Ext.widget('NewAccountForm');
    accountPanel.getEl().dom.innerHtml; // This line is in the handler of a button and it throws the error getEl is undefined.
    accountPanel.getEl().dom.innerHTML;

  9. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    If I do like below I get de innerHTML.

    Code:
    Ext.onReady(function() {
    
        Ext.define('LNM.view.newAccount.NewAccountForm', {
            extend: 'Ext.form.Panel',
            alias: 'widget.NewAccountForm',
            title: 'Create New Account',
            frame: true,
            bodyStyle: 'padding:15 15 15 15',
            autoScroll: true,
            height: 400,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'fieldset',
                title: 'Estate Information',
                collapsible: true,
                layout: 'anchor',
                anchor: '100%',
                items: [{
                    xtype: 'textfield',
                    anchor: '30%',
                    labelWidth: 100,
                    fieldLabel: 'Estate Location',
                    name: 'estateLocation',
                    flex: 1
                }, {
                    xtype: 'textfield',
                    anchor: '30%',
                    labelWidth: 100,
                    fieldLabel: 'Estate Officer',
                    name: 'estateOfficer',
                    flex: 1
                }, {
                    xtype: 'textfield',
                    anchor: '30%',
                    labelWidth: 100,
                    fieldLabel: 'Estate Assistant',
                    name: 'estateAssistant',
                    flex: 1
                }, {
                    xtype: 'textfield',
                    anchor: '30%',
                    labelWidth: 100,
                    fieldLabel: 'Estate Comments',
                    name: 'estateComments',
                    flex: 1
    }]
                }, {
                    buttonAlign: 'center',
                    buttons: [{
                        text: 'Reset',
                        handler: function() {
                            this.up('form').getForm().reset();
                        }
                    }, {
                        text: 'Submit',
                        formBind: true,
                        id: 'newaccountSubmitButton'
    }]
    }],  // End of CallTrackForm items
    
    
    
    
                        initComponent: function() {
                            this.callParent(arguments);
                        }
                    });
    
                    var form = Ext.create('LNM.view.newAccount.NewAccountForm', {
                        listeners: {
                            render: {
                                fn: function(c) {
                                    var d = c.getEl().dom.innerHTML;
                                    console.log(d);
                                }
                            }
                        }
                    });
    
                });

  10. #9
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Vote Rating
    13
    Answers
    16
    flanders will become famous soon enough

      0  

    Default


    Please use code tags, the code above is (almost) impossible to use.

    I think the issue is that you are instantiating the component (using Ext.widget()), but that doesn't mean it gets rendered. I think that when you do this it will work:

    Code:
    var accountPanel = Ext.widget('NewAccountForm', {
      renderTo: Ext.getBody()
    });
    accountPanel.getEl().dom.innerHtml; // This line is in the handler of a button and it throws the error getEl is undefined.
    

  11. #10
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Yes I have put that in my example as well

    Code:
      renderTo: Ext.getBody(),
    but you can also render it on a div or add the field set to a formpanel.

Thread Participants: 2