1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    0
    Dan Architect is on a distinguished road

      0  

    Default Unanswered: Displaying HTML in a Form

    Unanswered: Displaying HTML in a Form


    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:

    Code:
    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
                    }
                }
            }
            );
        }
    
    
    });
    Last edited by evant; 3 Jul 2012 at 1:47 PM. Reason: [code][/code] tags

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this will work:

    Code:
    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.‚Äč

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    0
    Dan Architect is on a distinguished road

      0  

    Default Can that be set from a data store?

    Can that be set from a data store?


    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.

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    0
    Dan Architect is on a distinguished road

      0  

    Default Still no styles

    Still no styles


    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.

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

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    0
    affiliateWise is on a distinguished road

      0  

    Default


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

Thread Participants: 2

Tags for this Thread