Results 1 to 2 of 2

Thread: Changing labelAlign dynamically

  1. #1

    Default Changing labelAlign dynamically

    Hi,

    How can I change a field's labelAlign Property from "left" to "top" at runtime?

    Reason for this is, that I want labels aligned next to the fields if the owner panel is a certain width, and the again I want it aligned at top when the panel becomes very small (width).

    Regards
    Schalk

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    123
    Answers
    16

    Default

    This will only work to change between left and top, its not dynamic at all:
    Code:
    Ext.create('Ext.form.Panel', {
                title: 'On The Wall',
                width: 300,
                bodyPadding: 10,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'numberfield',
                    anchor: '100%',
                    name: 'bottles',
                    fieldLabel: 'Bottles of Beer',
                    labelAlign: 'top',
                    value: 99,
                    maxValue: 99,
                    minValue: 0
                }],
                buttons: [{
                    text: 'Change Label Align',
                    handler: function() {
                        var field = this.up('form').down('[name=bottles]'),
                            labelData = field.getLabelableRenderData();
                        
                        if (labelData.labelClsExtra) {
                            field.labelEl.removeCls('x-form-item-label-top');
                        } else {
                             field.labelEl.addCls('x-form-item-label-top');
                        }
                        Ext.apply(field,{
                            labelAlign: field.labelAlign == 'top' ? 'left' : 'top'
                        });
                    }
                }]
            });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •