View Full Version : floating img inside a panel with surrounding text

25 Feb 2013, 8:26 AM

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

25 Feb 2013, 12:11 PM
Something like this?

25 Feb 2013, 1:26 PM
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.

26 Feb 2013, 1:26 AM
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!