floating img inside a panel with surrounding text

[clifficious]

Hi,

I was trying to generate a panel where there is a img in the top left corner and the rest is filled with text. I tried using the floating option on the img. But it is not shown then. Am I missing something?

Thanks for any hints. Here is my code.

Ext.define('My.foobar.Profile', {
    extend : 'Ext.Panel',
    alias : 'widget.profile',
    itemId: 'profile',


    border : false,
    
    html : 'This is the dummy text, that should surround the image',


    initComponent : function() {
        var me = this;


        Ext.applyIf(me, {
            dockedItems : [ 
                {
                    xtype : 'label',
                    dock : 'top',
                    itemId : 'panelItemId',
                    text : 'Header'
                } 
            ],
            items : [ 
                {
                    xtype : 'image',
                    height : 302,
                    width : 238,
                    itemId : 'myItemId',
                    src : './resources/images/dummy.jpg',
                    floating: true,
                    x: 25,
                    y: 25
                },
            ]
        });
        me.callParent(arguments);
    }
});

[EPV]

Something like this?
http://jsfiddle.net/WU4PV/1/

[crysfel]

Inside of the html property you can add any HTML code that you want but if you want the text to be dynamic you should use the tpl and data properties instead.

[clifficious]

Thanks EPV and crysfel,

so the answer I'm seeking is a combination of your two answers, right? I though, I could manage it without writing it in HTML and by using the img class provided by Ext.

I'm sorry, I can't vote both of your answers the best. Thanks!