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

Page 1 of 4 123 ... LastLast
  1. #1

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

    I have created a custom textfield control which inherits from Ext.Net.TextField. This control will be used in an Ext.Net.FormPanel. The problem I have is that if I drop the control into a Ext.Net.Panel it works fine but if I put the control in a form panel the mandatory field indicator (*) is rendered outside the FormPanel.
    Here is a sample page:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestFormPanel.aspx.vb" Inherits="TestFormPanel" %>
    <%@ 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>
    </head>
    <body>
        <form id="form1" runat="server"> 
            <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
            <ext:FormPanel ID="Panel1" runat="server" Title="Test Panel">            
                <Content>
                    <ui:MyTextField ID="txtName" FieldLabel="Name" runat="server" AllowBlank="false"></ui:MyTextField> 
                </Content>
            </ext:FormPanel> 
            <ui:MyTextField ID="txtName2" FieldLabel="Name2" runat="server" AllowBlank="false"></ui:MyTextField>  
        </form>
    </body>
    </html>
    And here is the control:
    Public Class MyTextField 
        Inherits Ext.Net.TextField
     
        Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
     
            If Me.AllowBlank = True Then
                MyBase.Render(writer)
            Else
                writer.WriteLine("<div style='float:left;'>")
                MyBase.Render(writer)
                writer.WriteLine("</div>")
     
                writer.WriteLine("<div style='padding-left:5px; color: red; font-weight: bold; float:left;'>")
                writer.WriteLine("*")
                writer.WriteLine("</div>")
     
                writer.WriteLine("<div style='clear:both;'>")
                writer.WriteLine("</div>")
            End If 
        End Sub 
    End Class
    Is there a way to incorporate the mandatory field indicator (*) into the ext.net.textfield itself, like the label that precedes it?
    Last edited by Daniil; Oct 22, 2010 at 4:40 AM. Reason: [CLOSED]
  2. #2
    Hi,

    ASP.NET approach to override controls doesn't work with ExtJS widgets.
    You have to ovveride functionlity via javascript code diring rendering on the client side

    For example, the following code add field's note
    if (!Ext.isEmpty(this.note, false)) {
    	if (!this.wrap) {
    		this.wrap = this.wrap || this.el.wrap();     
    		this.positionEl = this.wrap;        
    		this.resizeEl = this.wrap;
    		this.actionMode = "wrap";   
    	}
    	
    	if (this.noteAlign == "top") {
    		this.wrap.addClass("x-top-note");
    	}
    	
    	this.noteEl =  this.wrap[this.noteAlign == "top" ? "insertFirst" : "createChild"]({ 
    		cls  : "x-field-note " + (this.noteCls || ""), 
    		html : this.note 
    	}, undefined);
    }
    You can use the same approach for the mandatiry field indicator

    Also you can use more simpliest way (indicator in the Fieldlabel or CompositeField with TextField and DisplayField)
    <%@ 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 id="Head1" runat="server">
        <title></title>    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
            
            <ext:FormPanel runat="server" Width="350" Height="200" Title="Form">
                <Items>
                    <ext:TextField runat="server" FieldLabel="Text <span style='color:red;'>*</span>" AnchorHorizontal="-30" />
                    <ext:CompositeField runat="server" FieldLabel="Text">
                    <LayoutConfig Align="Middle" />
                        <Items>
                            <ext:TextField runat="server" Flex="1" />
                            <ext:DisplayField runat="server" Text="<span style='color:red;'>*</span>" Width="25" />
                        </Items>
                    </ext:CompositeField>
                </Items>
            </ext:FormPanel>        
        </form>
    </body>
    </html>
  3. #3
    This solution works, but does not seem very scalable. If our formPanel has 30 textfields on it and 25 of them are mandatory, I am not quite sure how we would implement this. The ideal, and really the requirement, is that the textfield and the mandatory field indicator are encapsulated into one control that can be droped onto a formpanel.

    It seems the easiest thing to do would be to make the "failed validation" indicator (!) be an asterick (*) until the field actually failed validation..

    The ultimate problem is that it's not just the textfield that needs cosmetic/functional modifications. Panel is another example that required a large amount of added markup and formatting to meet project specifications. These modifiications need to be encapsulated into a control that frees up developers farther down the production line to 'drag and drop' these controls into their code without further modification or additional files.

    We are working withn the EXT.Net code now to look at where we might make modifications, but will probably need some guidance.

    Thanks for the quick respose to our initial question. It will surely help others with similar but less complicated needs.
  4. #4
    Hi,

    I'm not 100% of all your requirements, but I think the best approach here is to either create a <Plugin> for Field classes, or create an override for the Field class which will handle the rendering of the indicators.

    On the server-side, you could then create a child class which exposes any new properties (if you want intellisense), or just have developers directly set the properties in markup.

    Example

    <ext:TextField runat="server" Foo="bar" />
    Hope this helps.
    Last edited by geoffrey.mcgill; Jul 08, 2010 at 8:04 PM.
    Geoffrey McGill
    Founder
  5. #5
    A related thread and request, see

    http://forums.ext.net/showthread.php...equired-Fields
    Geoffrey McGill
    Founder
  6. #6
    fyi, we are going to implement the .Prefix and .Suffix properties (string) on the Field class.

    The properties will also accept raw html strings, so the following will be possible.

    Suffix='<span style="color:red;">*</span>'
    If you can hang in there a few more days this be committed to svn.

    See http://extnet.lighthouseapp.com/proj...rty-for-fields

    Hope this helps.
    Geoffrey McGill
    Founder
  7. #7
    Well, we worked this through and have decided to not implement the .Prefix and Suffix properties.

    If you want to add a text value beside the Field, we would recommend using the <ext:CompositeField>.

    We're changing the plans to implement new extended Validation functionality with an option for an "Indicator" icon (or text). The Indicator would be swapped out with the error icon if validation fails.

    The following would be possible.

    Example

    <ext:TextField 
        runat="server" 
        FieldLabel="Name" 
        AllowBlank="false" 
        MsgTarget="Side" 
        IndicatorIcon="Star" 
        />
    If the TextField above was invalid, the IndicatorIcon would be replaced with the Error Icon.

    The Indicator logic would only be included if the Field was rendered in a Form Layout.

    Feedback appreciated.
    Geoffrey McGill
    Founder
  8. #8
    Inheriting from composite field presents numerous limitations over inheriting from textfield; namely that one has to re-create all the properties that come with a textfield that aren't present in composite field.

    The "indicator" swap seems to be the easiest solution. prefix and suffix are nice but seemingly would not be needed nearly as often as a mandatory field indicator on a form.

    When do you think this new extended Validation functionality might be implemented in the svn? and will it encompass all the commonly validated controls i.e. combobox, textfield, datefield, timefield etc.?

    Thanks for the extra posts and attention. It is always appreciated.
  9. #9
    *bump*

    When do you think this new extended Validation functionality might be implemented in the svn? and will it encompass all the commonly validated controls i.e. combobox, textfield, datefield, timefield etc.?
  10. #10
    Hi,

    Indicator functionality (it is not fully tested yet) is committed already. Please in the Examples Explorer (in SVN)
    Ext.Net.Examples\Examples\Form\Field_Indicator\Ove rview\
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] Set HTMLEditor as a Mandatory field
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 12, 2015, 7:56 PM
  2. Replies: 1
    Last Post: Apr 09, 2012, 5:03 PM
  3. [CLOSED] Mandatory Field Indicator displayed inside combobox
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 31, 2012, 8:12 AM
  4. Field indicator not showing?
    By wexman in forum 1.x Help
    Replies: 6
    Last Post: Mar 03, 2011, 1:37 PM
  5. [CLOSED] Issue w/new Field.Indicator
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 06, 2010, 12:23 PM

Tags for this Thread

Posting Permissions