Extjs.form.label formatting problems

[squarefan]

hi@all,

I am trying to use labels for basic description or headers in forms and also would like to incorporate pictures in them similar as its possible with buttions, fieldsets etc. (iconCls: xxx)

Unfortunately when I use a label its always positioned in the upper left corner of the column space and also smaller than e.g. a fieldLabel of a textfield or checkbox.

I tried to apply height, iconCls etc. but nothing seems to work. Is there currently a known bug in extsjs or is there a workaround for this problem??

thanks in advance,
squarefan

[santosh.rajan]

You can specify labelStyle: for the field.
As per the docs below.

labelStyle : String
A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or ''). For example, labelStyle: 'font-weight:bold;'.

[squarefan]

I tried this already, but unfortunately its not working

       columnWidth:.33,
                layout: 'form',
                items: [{
                    xtype:'label',
                    text: "Last Login: Today, 1:25pm",
                    name: 'lblLastLogin',
                    labelStyle: 'font-weight:bold;',
                    anchor:'93%'
                 }]

tried this, but it doesnt seem to stick with labels - everything else is working perfectly fine.

cheers,
alex

[evant]

Try adding cls: 'x-form-item' to your label definition.

[squarefan]

hi, thx for the quick answer.

just tried it but does nothing:

                columnWidth:.33,
                layout: 'form',
                items: [{
                    xtype:'label',
                    cls:'x-form-item',
                    text: "Last Login: Today, 1:25pm",
                    iconCls: 'info',
                    name: 'lblLastLogin',
                    labelStyle: 'font-weight:bold',
                    anchor:'93%'

both font-weigh and iconCls do nothing? maybe any other ideas?

thx,
squarefan

[squarefan]

so I did some tinkering and found out that with:
cls:'x-form-item',

indeed shows correctly formatted (same size and almost same format than fieldlabel), but still font-weight-bold, and iconCls does not work - was just a cache problem.
Is this maybe not possible with the label or could somebody else incorporate these properties with the label?

thx,
alex

[Condor]

Ext.form.Label has no labelStyle or iconCls config option!

However, Ext.form.Label does have cls and style config options.

You could use either of these to add some padding to make them look equal to other fields (cls:'x-form-item' helps) and some padding-left with a background-image.

[evant]

<style type="text/css">
label.myBold
{
   font-weight: bold;
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
Ext.onReady(function()
{
   var l = new Ext.form.Label(
   {
      cls: 'x-form-item myBold',
      text: 'Sup',
      renderTo: document.body,
   }
   );
}
);
</script>

[rahma]

thanks a lot evant

[atlantida00]

Hi!

Try this...

columnWidth:.33,
                layout: 'form',
                items: [{
                    xtype:'label',
                    text: "Last Login: Today, 1:25pm",
                    name: 'lblLastLogin',
                   style: 'font-weight:bold;',
                    anchor:'93%'
                 }]

It's very simple, you just have to us 'style' instead of 'labelstyle'. It works for me, so I'm sure it'll work for you too. And you can make changes about margin, padding, font-family....