PDA

View Full Version : how to image align fieldLabel?



s0165
21 Sep 2015, 7:45 PM
I have a problem.

In ext 4.07 there is no afterLabelTextTpl config but I want to insert a image icon after fieldLabel text.

I tried to get the labelEl and createChild on it. This trick works but I don't know how to align the image and the label text.

Are there any suggestions? Thanks

fiddle (https://fiddle.sencha.com/#fiddle/u82)



Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 500,
height: 125,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
fieldLabel: 'Support1',
labelWidth:250,
width: 400,
labelSeparator: '',
items: [{
xtype: 'radiofield',
itemId: 'yes',
name: 'support',
value: 1,
boxLabel: 'YES'
}, {
xtype: 'radiofield',
itemId: 'no',
name: 'support',
value: 0,
boxLabel: 'NO',
checked: true
}],
listeners: {
render: function(p) {
p.labelEl.createChild({
tag:'img',
src:'http://cdn.sstatic.net/stackoverflow/img/icon-48.png',
height:'20',
width:'20'
});
}
}
}, {
xtype: 'radiogroup',
fieldLabel: 'Support2',
labelWidth:250,
width: 400,
labelSeparator: '',
items: [{
xtype: 'radiofield',
itemId: 'yes',
name: 'support2',
value: 1,
boxLabel: 'YES'
}, {
xtype: 'radiofield',
itemId: 'no',
name: 'support2',
value: 0,
boxLabel: 'NO',
checked: true
}],
}]
});

joel.watson
22 Sep 2015, 6:16 AM
Hi--

I think you could either add "align: center" to the image tag definition, or add a custom CSS class and style it however you'd like.

Thanks!
Joel

s0165
22 Sep 2015, 7:31 PM
Hi--

I think you could either add "align: center" to the image tag definition, or add a custom CSS class and style it however you'd like.

Thanks!
Joel


Thanks Joel

I consider your suggestion and I add "vertical-align: -30%" to img tag.
Now It looks good but in different browser still a little different.



render: function(p) {
p.labelEl.createChild({
tag:'img',
src:'http://cdn.sstatic.net/stackoverflow/img/icon-48.png',
height:'20',
width:'20',
style: 'vertical-align: -30%'
});
}