PDA

View Full Version : Displaying HTML in a Form



Dan Architect
28 Jun 2012, 9:22 AM
I'm currently designing an app that has several forms. Each of these forms needs to display data-driven HTML with item descriptions. Unfortunately, the container objects that I'm using don't display once I've set the data. I can actually inspect the elements in Chrome and see that the data has been updated, but the page looks blank. I've searched the forums and it recommends that I use the component's update method, but I get Object [object Object] has no method 'update'

this is the view:



Ext.define('MyApp.view.AccountView', {
extend: 'Ext.form.Panel',
alias: 'widget.accountview',


config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'name',
title: 'accountName',
name: 'name',
items: [
{
xtype: 'button',
text: 'Edit',
flex: 1,
align: 'right'
}
]
},
{
xtype: 'panel',
height: 100,
id: 'logoUrl'
},
{
xtype: 'textfield',
label: 'Name:',
name: 'name'
},
{
xtype: 'textfield',
label: 'Base Url:',
name: 'baseUrl'
},
{
xtype: 'panel',
id: 'description',
scrollable: 'vertical',
flex: 1
}
],
listeners: [
{
fn: 'onFormpanelInitialize',
event: 'initialize'
}
]
},


onFormpanelInitialize: function(component, options) {
var accountStore = Ext.getStore('accountStore'),
accountId = 4;


accountStore.load(
{ accountId: accountId,
scope : this,
callback: function(records, operation, success) {
var account;


if (records.length === 1) {
account = records[0];


Ext.getCmp('name').setTitle(account.data.name);
Ext.getCmp('description').setHtml(account.data.description);
Ext.getCmp('description').update();
Ext.getCmp('logoUrl').setHtml('<img src="' + account.data.logoUrl + '"/>');


} else {
// account not found
}
}
}
);
}


});

scottmartin
28 Jun 2012, 12:14 PM
See if this will work:



Ext.define('MyForm', {
extend: 'Ext.form.Panel',

height: 350,
width: 650,
layout: {
align: 'stretch',
type: 'vbox'
},
bodyPadding: 10,
title: 'My Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'fieldcontainer',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'component', // place this in a panel to make it look better
title: 'HTML',
height: 200,
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'border: none; width: 120px; height: 250px;',
src: 'http://www.sencha.com'
}
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyForm', {
renderTo: Ext.getBody()
});


Regards,
Scott.‚Äč

Dan Architect
2 Jul 2012, 5:24 AM
I have not been able to give the suggestion a try. My first concern is: How do I load data dynamically in an iframe in that example? I need both bits of functionality to satisfy the requirement: The content has to render as HTML, and it has to be able to be loaded dynamically from the data store.

Dan Architect
2 Jul 2012, 6:12 AM
I didn't have much luck with an iframe instead of a panel. I modified my code to use Ext.get instead of Ext.getCmp, and I can see the content, but it's not styled despite having the styleHtmlContent property enabled.


Ext.define('App.view.AccountView', {
extend: 'Ext.form.Panel',
alias: 'widget.accountview',


config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'textfield',
label: 'URL Base',
name: 'urlBase',
readOnly: true
},
{
xtype: 'textfield',
label: 'Account Name',
name: 'name',
readOnly: true
},
{
xtype: 'textfield',
label: 'Account Id',
name: 'accountId',
readOnly: true
},
{
xtype: 'textfield',
label: 'Logo',
name: 'logoUrl',
readOnly: true
},
{
xtype: 'container',
id: 'description',
styleHtmlContent: true,
layout: {
type: 'fit'
},
flex: 1
}
],
listeners: [
{
fn: 'onFormpanelInitialize',
event: 'initialize'
}
]
},


onFormpanelInitialize: function(component, options) {
var store = Ext.getStore('accountStore'),
accountId;


store.load({
accountId: 4,
scope: this,
callback: function(records, operation, success) {
var account, description;


if (records.length === 1) {
account = records[0];


this.title = account.data.name;
this.setRecord(account);


description = Ext.get('description').setHtml(account.data.description);


} else {
//account not found
}
}
});


}


});

affiliateWise
3 Jul 2012, 1:31 PM
have you tried
renderTpl: <insert your html base url here>
then you can change the template later.