PDA

View Full Version : Changing labelAlign dynamically



Skalla
23 Feb 2015, 10:13 AM
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

glopes
23 Feb 2015, 7:27 PM
This will only work to change between left and top, its not dynamic at all:


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'
});
}
}]
});

imr