[CLOSED] NumberField text layout

[vadym.f]

Hi,

I'm curious if the default behavior of NumberField can be modified such that the text is left-aligned and the cursor is positioned following the text in the control.

[Baidaly]

Hello

I'm sorry but I don't quite understand you. Can you give more information or example?

[jwf]

Edit: tried to help for wrong version of ext. My bad, sorry.

[Baidaly]

If @jwf was right about your problem that you need change writing direction of input field. You can use CSS direction property:

<ext:NumberField runat="server" FieldLabel="Number" Width="200" StyleSpec="direction: rtl;" />

[vadym.f]

If @jwf was right about your problem that you need change writing direction of input field. You can use CSS direction property:

<ext:NumberField runat="server" FieldLabel="Number" Width="200" StyleSpec="direction: rtl;" />

Thanks for your responses guys! Unfortunately, including StyleSpec="direction: rtl;" didn't make any difference.

[Baidaly]

Sorry, but can you give more information or picture of what do you want? I'm just not sure what do you mean.

[vadym.f]

I just want to swap the text and the NumberField icon so that the text becomes left-aligned and icon, respectively, right-aligned. Please refer to the screenshot of existing control attached.

        .icon-number
        {
            background-image: url(./Images/number.png) !important;
            background-position: 0 0;
        }

                            
<ext:NumberField runat="server" ID="Number1" AllowDecimals="false" AllowNegative="false"
                                IconCls="icon-number" MaxLength="10" SelectOnFocus="true">

[Baidaly]

Try this one:

<ext:NumberField runat="server" FieldLabel="Number" Width="200" StyleSpec="text-align: right;" />

[vadym.f]

Try this one:

<ext:NumberField runat="server" FieldLabel="Number" Width="200" StyleSpec="text-align: right;" />

That doesn't work. BTW, what's the rationale behind designing the NumberField default behavior the way it is? If it makes common sense, I could probably try to convey it to my BAs without making modifications.

[Baidaly]

OK, I got it.

You have to use following overriding:

<script>
Ext.override(Ext.form.TextField, {
	setIconCls : function (iconCls) {
		if (this.isIconIgnore()) {
			return;
		}
	
		if (!this.icon) {
			this.renderIconEl();

			this.on("hide", function () {
				this.icon.hide();
			});

			this.on("show", function () {
				this.icon.show();
			});
		}

		this.iconCls = iconCls;
		this.icon.dom.className = "x-textfield-icon " + iconCls;
		this.icon.applyStyles({
			left: this.getWidth() - this.icon.getWidth() - 3
		});
		if (this.hidden) {
			this.icon.hide();
			this.on(
				"show", 
				function () {
					this.syncSize();
				}, 
				this, { 
					single : true
				});
		} else {
			this.syncSize();
		}
	}
});
</script>