[CLOSED] [1.0] Mandatory field indicator on textfield within FormPanel

**Daniil** · Jul 26, 2010, 9:19 AM

Hello, betamax!

Do you use the indicator functionality?
Any feedback (commentaries, remarks, issues, bugs) would be appreciated.

**betamax** · Aug 02, 2010, 11:21 PM

Yes Daniil, I do. There are some quirks, such as the one I found today with textfield were the field will grow over the indicator. Also in order to just use a common asteric, you have to use the indicator class property.

All in all it serves the purpose as expected and is need enhancement over the original form controls. Anything else, feel free to send me a message.

**betamax** · Aug 28, 2010, 3:15 AM

When we control a textfield's visibility with hidden=true and then use .show() to present the field to the user client side, the indicator does not reposition itself. Instead it stays in it's original position (see attached)

In the attached you see the field hidden when loaded. The radio buttons are basically a toggle to show, or hide, that text field depending on the choice. When the corresponding radio button is selected, .show() is called via javascript, and the result is represented by the bottom portion of the screen shot attached.

A similar situation occurs when using "grow". The indicator will stay in its position even though the text field "grows" beyond the vertical position of the indicator.

**geoffrey.mcgill** · Aug 28, 2010, 4:54 AM

Hi Roger,

Thanks for the report. We will investigate.

**Vladimir** · Aug 30, 2010, 11:53 AM

Hi,

Please update from SVN and retest

**betamax** · Aug 31, 2010, 9:14 PM

My initial testing shows that there still is some quirly behavior.

If note is set to topalign (txtLastName.NoteAlign = Ext.Net.NoteAlign.Top) then the indicator will align itself to the note and not the textbox.
If one types at normal speed, in grow mode, the indicator will dissappear. Hitting the space or back key after a pause will cause the indicator to reappear.
indicator appears to not be pointing to the proper url any more
```
.icon-bulletred {
background-image:url("/icons/bullet_red-png/ext.axd") !important; 
}
```
I believe it should be pointing to webresource... if we are using the standard ext indicator icons

There may be some other issues but that is all the time I had to test today.

**Vladimir** · Aug 31, 2010, 9:47 PM

Hi,

If note is set to topalign (txtLastName.NoteAlign = Ext.Net.NoteAlign.Top) then the indicator will align itself to the note and not the textbox.

Cannot reproduce it. I found a buf if use top align for the note but it is not releated with indicator (that is fixed in SVN)

If one types at normal speed, in grow mode, the indicator will dissappear. Hitting the space or back key after a pause will cause the indicator to reappear.

Cannot repriduce it. I typed fast, slow, normal but indicator doesn't dissapear

indicator appears to not be pointing to the proper url any more

Again I cannot reproduce it (please note that if your application has application name (HttpContext.Current.Request.ApplicationPath) then it should be added to the url).

Here is my test case

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
    <style type="text/css">
        .icon-bulletred {
            background-image:url("/icons/bullet_red-png/ext.axd") !important; 
        }
    </style>  
  
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
          
        <ext:FormPanel runat="server" Height="300">
            <Items>
                <ext:TextField runat="server" FieldLabel="Text" IndicatorIconCls="icon-bulletred" Grow="true" Note="Note" NoteAlign="Top" />
                <ext:TextField runat="server" FieldLabel="Text" IndicatorIconCls="icon-bulletred" Note="Note" NoteAlign="Top" />
                <ext:TextField runat="server" FieldLabel="Text" IndicatorIcon="BulletBlue" Note="Note"  />
            </Items>        
        </ext:FormPanel>
    </form>
</body>
</html>

**betamax** · Sep 01, 2010, 6:36 PM

Cannot reproduce it. I found a buf if use top align for the note but it is not releated with indicator (that is fixed in SVN)

Here's a demo of what I'm saying.

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title></title> 
 
    <style type="text/css">                
        /*x-field-note {
            clear:none;
        }*/
    </style>   
 
   <script type="text/javascript">
       function showText() {          
               txtAlternateEmail.show();
               txtAlternateEmail.setDisabled(false);
       }
 
 
</script>
</head> 
<body> 
    <form id="Form1" runat="server"> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
 
        <ext:FormPanel ID="FormPanel1" runat="server" Height="300"> 
            <Items> 
                <ext:TextField ID="TextField1" runat="server" FieldLabel="Text" IndicatorIcon="BulletRed" Grow="true" Note="Note" NoteAlign="Top" /> 
                <ext:TextField ID="txtAlternateEmail" runat="server" Width="200" AllowBlank="false" IndicatorIcon="Anchor"  Grow="true" MsgTarget="Side" MinLengthText="20" MaxLength="254"  NoteAlign="Top" Note="Note" hidden="true"></ext:TextField>
                <ext:Button ID="hideBtn" runat="server" Text="Show" OnClientClick="showText()" ></ext:Button>
            </Items>         
        </ext:FormPanel> 
    </form> 
</body> 
</html>

Clicking the show button shows the textfield but the indicator icon is in the wrong position and on the same line as the note. Also, if note=alignTop is used and a FieldLable is used, I have to set the clear style to none to get the field label to be aligned with the textfield.

indicator appears to not be pointing to the proper url any more

I didn't ask you to use custom icon class. I copied that style from firebug. That is the style ext creates. For bullet-red, the style is pointing to a local directory. Any other icon (I presume) is pointing to a webresource. Here's an example, again, copied from firebug

.icon-bulletblue {
background-image:url("/WebResource.axd?d=KUYKhiDIm2FGbyrrZk7bOrnHgvPA1Dx3Ew7HEfQ9B614sLch7H4q6Zp2PVz9uSM4gnuuMyAYga0jrMX49w-UuA2&amp;t=634165106276026221") !important;
}
.icon-bulletred {
background-image:url("/icons/bullet_red-png/ext.axd") !important;
}

IndicatorIcon="BulletBlue" works,
IndicatorIcon="BulletRed"doesn't, because that dir doesn't exist on my server.

As for typing.. that could very well be my box, so I'll let that go.

**geoffrey.mcgill** · Sep 01, 2010, 8:46 PM

Hi Roger,

Here's the full sample I'm testing with and both IconRed and IconBlue icons are rendering with the correct ext.axd paths.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server"> 
    <title>Ext.NET Example</title> 
  
    <script type="text/javascript">
        var showText = function () { 
           txtAlternateEmail.show();
           txtAlternateEmail.setDisabled(false);
        };
    </script>
</head> 
<body> 
    <form runat="server"> 
        <ext:ResourceManager runat="server" /> 
  
        <ext:FormPanel runat="server" Height="300"> 
            <Items> 
                <ext:TextField 
                    ID="TextField1" 
                    runat="server" 
                    FieldLabel="Text" 
                    IndicatorIcon="BulletRed" 
                    Grow="true" 
                    Note="Note" 
                    NoteAlign="Top" 
                    />
                     
                <ext:TextField 
                    ID="txtAlternateEmail" 
                    runat="server" 
                    Width="200" 
                    AllowBlank="false" 
                    IndicatorIcon="BulletBlue"  
                    Grow="true" 
                    MsgTarget="Side" 
                    MinLengthText="20" 
                    MaxLength="254"  
                    NoteAlign="Top" 
                    Note="Note" 
                    hidden="true"
                    />
                    
                <ext:Button 
                    runat="server" 
                    Text="Show" 
                    OnClientClick="showText" 
                    />
            </Items>         
        </ext:FormPanel> 
    </form> 
</body> 
</html>

Are you using the latest from SVN?

**betamax** · Sep 01, 2010, 9:28 PM

both IconRed and IconBlue icons are rendering

Once I rebooted I am not seeing that issue.

The other issues remain, primarily the hide/show issue, but also the note/indicator alignment issue.

Also, the indicator for radio group hides behind one of the radio buttons in this example.

<ext:RadioGroup runat="server" AllowBlank="false" IndicatorIcon="Anchor">
                <Items>
                <ext:radio runat="server"></ext:radio>
                <ext:Radio runat="server"></ext:Radio>
                </Items>
                </ext:RadioGroup>

Setting .x-form-indicator {position:static;} shows that it's there, but apparently not in the right place.

Thread: [CLOSED] [1.0] Mandatory field indicator on textfield within FormPanel

Thread Tools

Search Thread

Display

Indicator behavior when .hide() is called

Similar Threads

[CLOSED] Set HTMLEditor as a Mandatory field

Display Text Field As Mandatory -- Before Submit

[CLOSED] Mandatory Field Indicator displayed inside combobox

Field indicator not showing?

[CLOSED] Issue w/new Field.Indicator

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources