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

  1. #1

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

    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>
    Click image for larger version. 

Name:	field_note.PNG 
Views:	115 
Size:	3.6 KB 
ID:	5430
    Last edited by Daniil; Jan 21, 2013 at 2:35 PM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    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>
    Click image for larger version. 

Name:	field_note2.PNG 
Views:	107 
Size:	5.0 KB 
ID:	5431
    Last edited by bogc; Jan 16, 2013 at 10:29 PM.
  4. #4
    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.
  5. #5
    Quote Originally Posted by bogc View Post
    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!
  6. #6
    Quote Originally Posted by Baidaly View Post
    @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/showthre...l=1#post878154

    Re: InputWidth="100"

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

    Quote Originally Posted by bogc View Post
    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>
  7. #7
    Quote Originally Posted by Daniil View Post
    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).
  8. #8
    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.
  9. #9
    Thank you for the fix, it is what I had in mind.

Similar Threads

  1. [CLOSED] dropdown field width
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 02, 2012, 7:28 PM
  2. [CLOSED] Note Align Not Working in Composite Field
    By alexkay in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 12, 2010, 9:11 PM
  3. Replies: 2
    Last Post: Apr 09, 2010, 9:25 AM
  4. Replies: 3
    Last Post: Jul 14, 2009, 7:02 AM
  5. [CLOSED] Field Note desn't Hide!
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 09, 2009, 11:32 AM

Posting Permissions