PDA

View Full Version : Add text below image in column



asoto
11 Feb 2014, 5:08 AM
I briefly used Ext JS in the 2.x times and now I am struggling with what should be a simple task.

I have a header (layout 3 columns) the last column shows a Ext.Image component and I'd like to also show a text below. The header looks fine, the columns align give-or-take where I want them but I don't know how to add the text.

Tried "html" config in Image but nothing shows, then tried the route of initComponent function with getEl() and Ext.fly()..insertAfter but I get an error that getEl() returns a null value.

What's the proper "extjs way" to do what I want?

Code excerpt below:



,{
xtype: 'image',
src: 'resources/images/image_small.png',
alt: 'My Image',
margin: '10,40,10,10',
cls: 'floatright',
//html: 'Text below image' , Nothing rendered
itemId: 'justatest',
initComponent: function () {
var el = this.getEl(); // Tried also Ext.get(this.getEl())
console.dir(el);
Ext.fly(el).insertAfter({
tag: 'p',
html: 'Text to go below image' // Returns error Ext.fly()...is null
});
}






FWIW the image shows alright, and the view where this item is extends Container and has a layout type column with no custom config

asoto
12 Feb 2014, 1:18 AM
I answer myself :">

I dropped the whole "Ext.Image" stuff and just went to the very basic "Component" plus html config item. Not very pretty but it works