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
    8,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi