How to get the rendered HTML of a component.

[lastevilstanding]

Hi all,

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

Thanks in advance.

[tvanzoelen]

After render it possible to see the created html

component.getEl().dom.innerHTML;

[lastevilstanding]

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

[tvanzoelen]

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

[lastevilstanding]

after render only I am calling the function.

[tvanzoelen]

show me code then

[lastevilstanding]

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;

[tvanzoelen]

If I do like below I get de innerHTML.

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);
                            }
                        }
                    }
                });

            });

[flanders]

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:

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.

[tvanzoelen]

Yes I have put that in my example as well

  renderTo: Ext.getBody(),

but you can also render it on a div or add the field set to a formpanel.