[OPEN] [#1634] [4.8.1] Using InputWidth setting

Printable View

Mar 12, 2019, 5:12 PM
NewLink

[OPEN] [#1634] [4.8.1] Using InputWidth setting

Hello support team,
I would like to know why setting the width of the field input element using InputWidth() does not work as described:

Code:

@using Ext.Net; @using Ext.Net.MVC; @{ ViewBag.Title = "Form"; Layout = null; } <!DOCTYPE html> <html> <head> <title>Ext.NET MVC Test Case</title> </head> <body> @(Html.X().ResourceManager()) @(Html.X().FormPanel() .Border(false) .BodyPadding(10) .Items( Html.X().TextField().FieldLabel("Label 1").InputWidth(1000), Html.X().TextField().FieldLabel("Label 2").InputWidth(50) ) ) </body> </html>

Thank you for your assistance.

Kind regards
Dan
Mar 13, 2019, 6:35 PM
fabricio.murta

Hello, @NewLink!

That's an interesting topic you raised!

This setting came back from Ext.NET v1, yet it was never documented in Sencha documentation!
- v3 docs on field: https://docs.sencha.com/extjs/3.4.0/...Ext.form.Field
- v4 docs on field: https://docs.sencha.com/extjs/4.2.6/...rm.field.Field (here in practice it ceased to exist!)
- v5 docs on field: https://docs.sencha.com/extjs/5.1.4/...eld.Field.html
- v6 docs on field: https://docs.sencha.com/extjs/6.7.0/...eld.Field.html

I'm looking at Ext.form.Field (Ext.form.field.Field v4+) because that's where the setting used to be (in practice) defined.

As such, you are not going to see this functionality in any changelog (breakin change) as it was never a supported feature. And just as such, our mistake to add support to it led us to have it left in the code as we upgraded between versions. At the time, Ext JS documentation was lacking a bit, and we found it would be useful to support this feature albeit not officially supported. Just as a consequence, we missed it when it was moved out for good, and the setting has been lying around, and not being usable, since Ext.NET 2.x era!

And here's an old forum thread which supports these facts: Why change width to inputWidth in v4? (note: v4 here refers to Ext JS version, which was at the time tied to Ext.NET version 2).

That said, we just logged issue #1634 in github, and we will at least mark this as obsolete for the next version. It's probably safe to remove it as nobody could use it since Ext.NET v2 anyway.

As for an effective answer for your question; this setting does not work, don't use it. To ensure the input element's width, if you don't have a label in the field, just give it a value for Width or WidthSpec (former accepts integer and is expressed as pixels, latter is a string, in which you can fill with 100px, 100%, etc).

If you use a label to the left or right of the field, you may need to account/control the field width also with the LabelWidth setting.

If this really hurts your design, you still can obtain the same functionality of InputWidth with the FieldCls config using a CSS class or inline CSS with the FieldStyle config.

Hope this helps!
Mar 14, 2019, 11:20 AM
NewLink

Hello FabrÃ*cio,
thank you for the explanation.

Well, in my opinion, InputWidth is/was a very meaningful setting. Usually, the input length is more or less fixed: ZIP code *never* will be more than 10 characters long, 50 characters suffice for the last name... Conversely, label width changes more often, especially in the multilingual environment as our framework is. It often happens that in some language the expression is much longer than in other languages â€‹â€‹and therefore we need to customize (default) LabelWidth. If you do so, and having also the Width specified, the input element will no longer match the expected input. Therefore, InputWidth is very useful in such cases.

However, if it is not supported, we cannot do anything about it.

Thank you for your comprehensive explanation.

Kind regards
Dan
Mar 14, 2019, 2:32 PM
fabricio.murta

Hello Dan!

I couldn't agree more with you in every aspect. As far as I could understand, as they changed to conform to the hbox layout, then the setting, that was never documented, was gone, and Sencha didn't have the commitment to keep support or even deliver notice as a breaking change.

But I was hoping the FieldCls and/or FieldStyle would fulfill the exact same requirement. The uncertainity here would be whether it behaves well or not with the specific scenario (as having it arranged nicely with labels even cross-language).

If you're having trouble figuring out how to get the same functionality with current Ext.NET version, we'd be more than glad to help with, if you create a new thread with a test case illustrating your requirements.
Mar 14, 2019, 5:08 PM
NewLink

Hi FabrÃ*cio,
thank you for your comments. Using a style setting certainly offers a similar solution, though not as nice and straightforward as InputWidth. The thread can be closed.

Kind regards
Dan