UserControls and Validation

  1. #1

    UserControls and Validation

    Hello, I'm quite new here, I'm trying to play with ext.net.

    My problem is with base page design.

    Originally my idea was to use common html + UserControls + ext controls where it make sence

    I found my first problem
    validation does not work on the usercontrol

    in fact, I was looking for something like https://examples1.ext.net/#/Layout/F..._UserControls/ where I wanted to mark Street as mandatory
    The only solution I found was to introduce FormPanel into any usercontrol and somehow register all form on the page and validate one by one on submit... bit too crazy solution...
    (in compare to simple usage of #{formId}.getForm().isValid() method or FormBind property

    So am I right that using usercontrols is not the right idea when designing solutions using ext.net?


    Whole purpose of excercise is follows: Our forms are quite complicated, we have usually form consited of 10-20 usercontrols, that are not here for reusing, but just to split the form into smaller pieces (units)
    so what's the recomended approach for ext.net? From searching forums I got an impression that webcontrols.
    Ok, that means no HTML, but thanks to the C# object/collection initializers, it's actually similar "syntax" like doing that in extjs (+ C# provieds intelisence)

    That sounds good, I tried to create my first control, like this (just to encaspulate combobox)


    public class ComboBoxControl : Ext.Net.CompositeField
           {
                  private ComboBox _combo;
                  private Store _store;
    
                  public ComboBoxControl()
                  {
                         
                         _store = new Store
                                       {
                                                    ID="ddlStore",
                                              Reader =
                                                    {
                                                           new JsonReader
                                                                  {
                                                                         Fields =
                                                                                {
                                                                                       new RecordField("Id"),
                                                                                       new RecordField("Name")
                                                                                }
                                                                  }
                                                    }
                                       };
    
                         _combo = new ComboBox
                                       {
                                              //Store = {_store},
                                              ID = "ddlCombo",
                                                    StoreID = "ddlStore",
                                              DisplayField = "Name",
                                              ValueField = "Id",
                                              Mode = DataLoadMode.Local,
                                              TriggerAction = TriggerAction.All,
                                                    EmptyText = "-- Select value --"
                                       };
                  }
    
                  public bool AllowBlank
                  {
                         get { return _combo.AllowBlank; }
                         set { _combo.AllowBlank = value; }
                  }
    
                  protected override void OnInit(EventArgs e)
                  {
                         Controls.Add(_store);
                         Items.Add(_combo);
    
                         base.OnInit(e);
                  }
    
    
                  private void Bind(IEnumerable source)
                  {
                         List<object> data = new List<object>();
                         foreach (var item in source)
                         {
                               var property = item.GetType().GetProperty(item.GetType().Name.Replace("Class", "Name"));
                               object name = property.GetValue(item, null); 
                               data.Add(new
                                             {
                                                    Id = item.PrimaryKey.ToString(),
                                                    Name = name as string
                                             });
                         }
                         _store.DataSource = data;
                         _store.DataBind();
                  }
    
           }
    It seems to work, but I'm not sure it's correct ( here I need an advice, as dozens of controls will be created in similar way)

    So as a result -Am I right that for validating whole form, there must be single FormPanel on the page (so if there is nested form, the child forms are not validated when the parent is validated). In addition - is there anything like validation group?

    is the Controls.Add, Items.Add used in correct way in right place?

    Controls.Add(_store);
    Items.Add(_combo);
    I have following partially related questions
    a) is somewhere sample of whole website, where I can inspire
    b)
    data.Add(new
                  {
                         Id = item.PrimaryKey.ToString(),
                         Name = name as string
                  });
    to

    data.Add(new
                  {
                         Id = item.PrimaryKey.ToString(),
                         Name = name
                  });
    (name is of object type)
    The Name property is not rendered is the data to the page - so the data looks like

    this.ctl00_ctl00_cphPageContent_cphPageContent_ddlStore = new Ext.ux.data.PagingStore({proxyId:"ctl00_ctl00_cphPageContent_cphPageContent_ddlStore",autoLoad:true,reader:new Ext.data.JsonReader({fields:[
            {name:"Id"},
            {name:"Name"}
        ]}),directEventConfig:{},
            proxy:new Ext.data.PagingMemoryProxy([
            {"Id":"9000579"},
            {"Id":"9000520"},
            {"Id":"9000553"},
            {"Id":"9000609"},
            {"Id":"9000552"},
    ......

    any idea why?
    Last edited by geoffrey.mcgill; Nov 22, 2011 at 7:45 AM. Reason: please use [CODE] tags
  2. #2
    Hi,

    Please keep one issue per one thread, or tightly related issues.

    I will answer the four issues which, I think, are tightly related.

    Quote Originally Posted by Zdenek View Post
    validation does not work on the usercontrol
    Well, a FormPanel can't validate html, it validates only its items.

    But your assumption is not a total truth.

    Please look at the example how a TextField from a user control can be an item from a FormPanel of a page. The main trick - wrapping user control's fields in a layout control.

    Example Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/TestUC.ascx" TagPrefix="uc" TagName="TestUC" %>
    
    <!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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel ID="FormPanel1" runat="server">
                <Items>
                    <ext:TextField runat="server" AllowBlank="false" />
                    <ext:Container runat="server">
                        <Content>
                            <uc:TestUC runat="server" />
                        </Content>
                    </ext:Container>
                </Items> 
            </ext:FormPanel>
            <ext:Button runat="server" Text="Test">
                <Listeners>
                    <Click Handler="alert(FormPanel1.isValid());" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
    Example User Control
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:FormLayout runat="server">
        <Anchors>
            <ext:Anchor>
                <ext:TextField runat="server" AllowBlank="false" />
            </ext:Anchor>
            <ext:Anchor>
                <ext:TextField runat="server" AllowBlank="false" />
            </ext:Anchor>
        </Anchors>
    </ext:FormLayout>
    Quote Originally Posted by Zdenek View Post
    So am I right that using usercontrols is not the right idea when designing solutions using ext.net

    so what's the recomended approach for ext.net? From searching forums I got an impression that webcontrols.
    Well, it's not true. You can use user controls if you wish.

    But, really, I'd prefer a custom control.

    Quote Originally Posted by Zdenek View Post
    In addition - is there anything like validation group?
    Please investigate this thread:
    http://forums.ext.net/showthread.php?14195
  3. #3

    How it work internally

    Hello

    Thanks for posting the trick with Layout control as a root,
    but I don't understand why it works

    why following code in usercontrol works

    <Anchors>
            <ext:Anchor>
                <ext:Panel runat="server" Layout="form">
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />   
                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                    </Items>
                </ext:Panel>
            </ext:Anchor>
        </Anchors>
    but

    <ext:Panel runat="server" Layout="form">
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />   
                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                    </Items>
                </ext:Panel>
    does not work

    Even if I put controls into the innerform , they are still validated:

    <ext:FormLayout runat="server">
         <Anchors>
            <ext:Anchor>
                <ext:Panel runat="server" Layout="form">
                    <Items>
                        <ext:FormPanel runat="server">
                            <Items>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />   
                                <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                            </Items>
                            
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
    
            </ext:Anchor>
        </Anchors>
        
    </ext:FormLayout>
    Thanks for the link to the validation groups

    Regards
    Zdenek
    Last edited by Daniil; Nov 23, 2011 at 6:55 PM. Reason: Please use [CODE] tags
  4. #4
    Well, if a top level control of a user control is a layout control, then its items become container's items.
    http://docs.sencha.com/ext-js/3-4/#!...property-items

    Otherwise, there is no way apart from rendering it as html.

    But, repeat myself, the FormPanel's validation mechanism works only with FormPanel's items.

Similar Threads

  1. Client Side Validation and Validation Status
    By speddi in forum 1.x Help
    Replies: 8
    Last Post: Nov 03, 2011, 11:24 AM
  2. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  3. [CLOSED] AjaxMethods in UserControls
    By Justin_Wignall in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Nov 19, 2009, 8:39 AM
  4. ScriptManagerProxy and UserControls
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 31, 2008, 4:30 PM

Tags for this Thread

Posting Permissions