Question

I’m using Sencha Touch 2.0.1. I’m trying to get a reference to some HTML in a Container. (My objective is to read the width of the object, and shrink the font size if necessary so it fits nicely).

Here’s my code:

Ext.define("SFCT.view.Flashcard", { 
    extend: 'Ext.Container', 

    xtype: 'flashcardpanel', 


    requires: [ 
        'Ext.TitleBar' 
    ], 

    config: { 
        itemId: 'mainScreen', 
        title: 'Flashcards', 

        layout: 'fit', 

        items: [ 
            { 
                xtype: 'container', 
                layout: { 
                    type: 'vbox', 
                    pack: 'center' 
                }, 
                items: [ 
                    { 
                        xtype: 'container', 
                        itemId: 'wordContainer' 
                    } 
                ], 
                style: 'text-align: center' 
            }, 
            { 
                xtype: 'button', 
                docked: 'right', 
                text: 'Next', 
                action: 'next' 
            } 
        ] 
    }, 

    updateWord: function(newWord) { 
        var s = '<div style="font-size: 72px">' + newWord+ '</div>'; 
        var c = Ext.ComponentQuery.query('#wordContainer')[0]; 
        console.log(c.getHtml()); 
        c.setHtml(s); 
    } 
}); 

If I use Ext.Container.getHtml() as shown above, it returns the HTML as a string. But I’m looking for a reference to the div element itself, so that I can get its width.

Any ideas how I can do that?

Thanks.

Answer 1

If I’m not mistaken

c.element

Should get you a reference to the wrapped element.