PDA

View Full Version : Howto remove labelSeparator when clearing a FieldLabel



walpen
6 Sep 2013, 1:28 AM
I have a problem when I'm clearing a fieldLabel. The labelSeparator will not automatically be removed.

When the fieldLabel isn't set and I add some text by calling the function setFieldLabel("sometext") this will also automatically add the labelSeparator.

When I now have to remove the text of the fieldLabel by calling setFieldLabel("") then the labelSeparator will not be removed.

How can I achieve, that also the labelSeparator is removed?
I know about the config: hideLabel. But for me this doesn't work, because I use dynamically growing fieldLabels when the panel size is changed.

Thanks for any suggestions
Christian

simplified Ex:


Ext.create('Ext.Container', {
layout: {
type: 'hbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
id: "txt1",
name: 'name',
fieldLabel: '',
labelAlign: 'right',
hideEmptyLabel: false,
hideLabel: false
}, {
xtype: 'button',
name: 'SetLabelText',
text: 'set Labeltext',
handler: function (txt) {
Ext.getCmp("txt1").setFieldLabel("now set");
}
}, {
xtype: 'button',
name: 'EmptyLabelText',
text: 'make empty',
handler: function (txt) {
Ext.getCmp("txt1").setFieldLabel("");
}
}]
});

ettavolt
6 Sep 2013, 2:09 AM
You should not use hideEmptyLabel: false (the default is true). This complete removes label cell from layout. If you need to show empty space, then you must override setFieldLabel implementation on the BaseField (overriding on mixin won't have desired effect).

walpen
6 Sep 2013, 2:55 AM
Sure I have to use hideEmptyLabel:false, otherwise the alignment of the Input-Fields in my Form aren't correct.

See my example: The Inputfield txt1 starts at position 100 my second Inputfield txt2 starts at position 0. I want that also txt2 starts at position 100, also when the fieldLabel isn't set


Ext.create('Ext.container.Container', {
layout: {
type: 'vbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'txt1',
fieldLabel: 'txt1'
},{
xtype: 'textfield',
name: 'txt2',
fieldLabel: ''
}]
});

ettavolt
6 Sep 2013, 3:59 AM
As I've written:

If you need to show empty space, then you must override setFieldLabel implementation on the BaseField (overriding on mixin won't have desired effect).

droessner
6 Sep 2013, 5:43 AM
You could do this:



Ext.create('Ext.Container', {
layout: {
type: 'hbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
id: "txt1",
name: 'name',
fieldLabel: '',
labelSeparator: '',
labelAlign: 'right',
hideEmptyLabel: false,
hideLabel: false
}, {
xtype: 'button',
name: 'SetLabelText',
text: 'set Labeltext',
handler: function (txt) {
Ext.getCmp("txt1").setFieldLabel("now set:");
}
}, {
xtype: 'button',
name: 'EmptyLabelText',
text: 'make empty',
handler: function (txt) {
Ext.getCmp("txt1").setFieldLabel("");
}
}]
});

walpen
9 Sep 2013, 12:51 AM
Thanks for your suggestions!

@droessner: In a small Application this is a good idea. But in a bigger Application i wouldn't do this, because you have to change all fieldLabels if you decide to change the labelSeparator.

@ettavolt: This should work, but for me as beginner with JavaScript and ExtJs it's to complicated to override base-functions.

I decided not to use any separator. So I set (labelSeparator:'') and I don't set ":" at the end of the fieldLabel

regards
Christian