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.29694

[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.

[lastevilstanding]

Thanks a lot tvanzoelen..!!