1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default Extjs.form.label formatting problems

    Extjs.form.label formatting problems


    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

  2. #2
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    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;'.
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    I tried this already, but unfortunately its not working

    Code:
           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

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,005
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Try adding cls: 'x-form-item' to your label definition.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    hi, thx for the quick answer.

    just tried it but does nothing:

    Code:
                    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

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,005
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    <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>
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Ext User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    1
    rahma is on a distinguished road

      0  

    Default


    thanks a lot evant

  10. #10
    Ext User
    Join Date
    Sep 2008
    Location
    Madrid
    Posts
    1
    Vote Rating
    0
    atlantida00 is an unknown quantity at this point

      0  

    Talking Once I had the same problem...

    Once I had the same problem...


    Hi!

    Try this...

    Code:
    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....