Displaying HTML in a Form

[Dan Architect]

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]

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]

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]

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]

have you tried
renderTpl: <insert your html base url here>
then you can change the template later.