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

Printable View

Show 40 post(s) from this thread on one page

Jul 07, 2010, 10:16 PM
betamax

[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:

Code:

<%@ 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:

Code:

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?
Jul 08, 2010, 12:31 PM
Vladimir

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

Code:

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)

HTML Code:

<%@ 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>
Jul 08, 2010, 7:22 PM
betamax

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.
Jul 08, 2010, 7:32 PM
geoffrey.mcgill

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

Code:

<ext:TextField runat="server" Foo="bar" />

Hope this helps.
Jul 09, 2010, 5:57 AM
geoffrey.mcgill

A related thread and request, see

http://forums.ext.net/showthread.php...equired-Fields
Jul 09, 2010, 5:28 PM
geoffrey.mcgill

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.

Code:

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.
Jul 14, 2010, 5:30 PM
geoffrey.mcgill

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

Code:

<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.
Jul 14, 2010, 9:16 PM
betamax

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.
Jul 20, 2010, 1:40 PM
betamax

*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.?
Jul 20, 2010, 1:46 PM
Vladimir

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\

Show 40 post(s) from this thread on one page