I am afraid you may have slightly mistaken the semantic of the LabelAlign
Setting it as Left
means the label will be positioned to the left of the field and
Setting it as Right
means the labels will still
be positioned to the left of the field but now
The setting is documented under Ext.form.field.Number.labelAlign
and I believe it supports what I pointed above.
This becomes clear if you expand your test case to this:
<%@ Page Language="C#" %>
<title>NumberField - Ext.NET Examples</title>
<ext:ResourceManager runat="server" />
<ext:NumberField ID="NumberField1" runat="server" FieldLabel="Age0" LabelAlign="Right" />
<ext:NumberField ID="NumberField2" runat="server" FieldLabel="Age1" LabelAlign="Left" />
<ext:NumberField ID="NumberField3" runat="server" FieldLabel="Age_Long_Long" />
To aggravate a little the story here, you are using the Form
layout. It is very strict as to the configuration of the fields, so much that it will force the fields to ignore if you set LabelAlign="Top"
. In fact, if you change any field above to use this label alignment, you'll only see it follow when you change the layout of the surrounding panel to, say VBox
Yet, there's no actual alignment setting in spite of being placed to the right of the form field. This would naturally happen (to all fields) when you set the whole Ext.NET language setting to RTL
(right-to-left writing, as it is used for some languages). But I doubt that would be the case for you. You can set the individual component's RTL
setting to true, but you would then get the whole component reversed, with its trigger to the left and the number to the right, as opposite to its usual self. It also prepends the colon to the label instead of appending it.
I believe in your case what you could best do would just add an <ext:Label ... Text="Age" />
. You'd have to drop the Form
layout nevertheless, as it is not flexible enough to allow you to do this no matter what.
The first thing I think you could do is use the VBoxLayout
in the surrounding panel, and then surround each "row" (containing a number field + label) with an <ext:Container />
using the HBoxLayout
setting, like this:
<ext:Container runat="server" Layout="HBoxLayout">
<ext:NumberField ID="NumberField1" runat="server" />
<ext:Label runat="server" Text="AgeLbl" />
There will be the need for extra styling though, as the "label" would now likely not to be aligned horizontally with the field, so a little padding-top, or tuning of HBoxLayoutConfig (like using 'stretch' in vertical alignment).
I hope this clarifies the issue and helps you find a solution that would best fit your use case!