PDA

View Full Version : [CLOSED] A Field note doesn't extend to the right when setting the Field width using the inputWidth



bogc
Jan 16, 2013, 5:28 PM
Please see this sample and the screen shot:

I tested it using the trunk version as of yesterday.


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Field Note - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.red-note {
color: red !important;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="Form1" runat="server">
<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Height="180">
<FieldDefaults LabelAlign="Right" LabelWidth="100" LabelSeparator=""/>
<Items>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Field1" Note="The quick brown fox jumps over the lazy dog" width="200" InputWidth="300"/>
</Items>
</ext:FormPanel>
</form>
</body>
</html>


5430

Aurelio
Jan 16, 2013, 9:55 PM
Hi..bogc

For me the Property NOTE use the property width of the field and not the Property InputWidth

If you set the Width=400 and the InputWidth=90 or any other value this work..

But during the test I found an anomaly, if you set the Widht=400 and the InputWidth=100, the dimension of the textfied is set to width(400), if not use the InputWidh=100 is work Ok. (Maybe this can be a bug)

Thanks
Aurelio

bogc
Jan 16, 2013, 10:25 PM
Hi:

My example is bit contrived, usually you use either width or inputWidth, but not both at the same time.

Below there is another sample. I would expect the note to look in both cases the same, since both textfields have the same width. I think something is not right in the computation of the box that the note is supposed to be appear in. The right margin of the note should be dictated by the right margin of the textfield. Or perhaps the note should be let to flow to the right as far as the form goes or as far as the neighbor controls to the right allow it.

I should also say that I find the shift in paradigm where the width now includes the label confusing, because usually the label width is set at the formpanel level.


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Field Note - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.red-note {
color: red !important;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="Form1" runat="server">
<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Height="180">
<FieldDefaults LabelAlign="Right" LabelWidth="100" LabelSeparator="" />
<Items>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Field1" Note="The quick brown fox jumps over the lazy dog" InputWidth="150"/>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Field1" Note="The quick brown fox jumps over the lazy dog"/>
</Items>
</ext:FormPanel>
</form>
</body>
</html>


5431

Baidaly
Jan 16, 2013, 10:29 PM
Hello, guys!

@bogc, it seems that having field with width less then inputWidth doesn't have sense. However, we will investigate this.

Thank you for your report!

@Aurelio, thank you for your report too!


But during the test I found an anomaly, if you set the Widht=400 and the InputWidth=100, the dimension of the textfied is set to width(400), if not use the InputWidh=100 is work Ok. (Maybe this can be a bug)

It's a bug. We are investigating.

Baidaly
Jan 16, 2013, 10:34 PM
Hi:

My example is bit contrived, usually you use either width or inputWidth, but not both at the same time.

Below there is another sample. I would expect the note to look in both cases the same, since both textfields have the same width. I think something is not right in the computation of the box that the note is supposed to be appear in. The right margin of the note should be dictated by the right margin of the textfield. Or perhaps the note should be let to flow to the right as far as the form goes or as far as the neighbor controls to the right allow it.

I should also say that I find the shift in paradigm where the width now includes the label confusing, because usually the label width is set at the formpanel level.

Yes, this is strange. We are investigating.

Thank you!

Daniil
Jan 17, 2013, 6:22 AM
@bogc, it seems that having field with width less then inputWidth doesn't have sense. However, we will investigate this.


Yes, I also think that InputWidth should not be bigger than Width.

Here are some details about the InputWidth property by Evan.
http://www.sencha.com/forum/showthread.php?199887&p=878154&viewfull=1#post878154

Re: InputWidth="100"

It has been fixed in SVN. Thank you again for the report.



I should also say that I find the shift in paradigm where the width now includes the label confusing, because usually the label width is set at the formpanel level.


Well, it was the improvement in Ext JS 4 / Ext.NET 2 having a possibility to manage field labels on the field level.

Re: InputWidth and Note

Yes, it looks like Note can stretch a field if InputWidth specified. Thank you for the report.

Here is a bit simplified test case. Click the button - it shows different widths of the fields.

If remove the Note properties widths will be the same. If remove InputWidth - again, the same. We are investigating further.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button
runat="server"
Text="Widths"
Handler="alert(App.TextField1.getWidth() + ' ' + App.TextField2.getWidth());" />

<ext:TextField
ID="TextField1"
runat="server"
Note="The quick brown fox jumps over the lazy dog"
InputWidth="150" />

<ext:TextField
ID="TextField2"
runat="server"
Note="The quick brown fox jumps over the lazy dog" />
</body>
</html>

Daniil
Jan 17, 2013, 4:23 PM
Re: InputWidth and Note

Yes, it looks like Note can stretch a field if InputWidth specified. Thank you for the report.

Here is a bit simplified test case. Click the button - it shows different widths of the fields.

If remove the Note properties widths will be the same. If remove InputWidth - again, the same. We are investigating further.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button
runat="server"
Text="Widths"
Handler="alert(App.TextField1.getWidth() + ' ' + App.TextField2.getWidth());" />

<ext:TextField
ID="TextField1"
runat="server"
Note="The quick brown fox jumps over the lazy dog"
InputWidth="150" />

<ext:TextField
ID="TextField2"
runat="server"
Note="The quick brown fox jumps over the lazy dog" />
</body>
</html>



Well, it is rather not a bug. To get the same widths for sure we should set up Widths explicitly for the fields (or organize respective layout).

Daniil
Jan 21, 2013, 2:35 PM
Finally, we decided to add the following into the TextField's initComponent function (some kind of enhancement).

if (this.inputWidth && !this.width) {
if (this.labelAlign !== "top" && (this.fieldLabel || !this.hideEmptyLabel) && !this.hideLabel) {
this.width = this.labelWidth + this.labelPad + this.inputWidth;
} else {
this.width = this.inputWidth;
}
}

So, we will get the same fields in your and my examples.

Thank you for the question.

bogc
Jan 21, 2013, 4:22 PM
Thank you for the fix, it is what I had in mind.