PDA

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



clifficious
25 Feb 2013, 8:26 AM
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
25 Feb 2013, 12:11 PM
Something like this?
http://jsfiddle.net/WU4PV/1/

crysfel
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.

clifficious
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!