[CLOSED] [1.0] Referencing User Controls using #{}

[bsnezw]

I have a user control that encapsulates the functionality of the date range that you have posted in the examples explorer:

            <ext:MultiField ID="MultiField1" runat="server" FieldLabel="Test" Cls="nowrap-group">
                <Fields>
                    <ext:DateField runat="server" ID="FromDate" Vtype="daterange" Width="80" />
                    <ext:Label ID="Label1" runat="server" Text="to" ForID="ToDate" Width="10" />
                    <ext:DateField runat="server" ID="ToDate" Vtype="daterange" Width="80">
                        <Listeners>
                            <Render Handler="this.startDateField = '#{FromDate}'; #{FromDate}.endDateField = '#{ToDate}';" />
                        </Listeners>
                    </ext:DateField>
                </Fields>
            </ext:MultiField>

I initially tried to extend the MultiField and but I ran into a problem where I could clear the dates, set the dates but I couldn't figure out how to get the dates client side. So now I add the user control shown above to a page and it works great:

 <ext:Panel ID="Panel17" runat="server" Border="false" >
                            <Content>
                                <uc1:DateRange ID="LossDate" runat="server" LabelText="DAte" />
                            </Content>
                        </ext:Panel>

There is a store on the page and i want to include the fromdate value in the store params. what is the correct #{} to reference the from date? I have tried:

<ext:Parameter Name="DateOfLossFrom"    Mode="Raw" Value="#{LossDate}.#{FromDate}.getValue()" />
<ext:Parameter Name="DateOfLossFrom"    Mode="Raw" Value="#{LossDate}.FromDate.getValue()" />

and a couple of other variations. If I look at view source it shows as:

ctl00_ContentPlaceHolder1_Criteria1_ClaimSelector1 _LossDate_FromDate

What is the correct #{} syntax to get that ClientID?

Thanks

[Vladimir]

Hi,

I wrote two samples.

1. First sample shows how to write custom control inherited from MultiField and retrieve values on client and server sides

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="System.ComponentModel"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public class DateRange : MultiField
    {
        private DateField fromDate;
        private DateField toDate;
        private Ext.Net.Label label;
        
        public DateRange()
        {
            fromDate = new DateField
            {
                Vtype = "daterange",
                Width = 80
            };

            label = new Ext.Net.Label
                        {
                            Text = "to",
                            Width = 10
                        };

            toDate = new DateField
            {
                Vtype = "daterange",
                Width = 80,
            };
            
            this.Fields.AddRange(new Ext.Net.Component[] {fromDate, label, toDate});
        }

        protected override void OnBeforeClientInit(Observable sender)
        {
            this.ToDate.Listeners.Render.Handler = string.Format("this.startDateField = '{0}'; {0}.endDateField = '{1}';", this.FromDate.ClientID, this.ToDate.ClientID);
        }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DefaultValue(null)]
        public DateField FromDate
        {
            get
            {
                return this.fromDate;
            }
        }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DefaultValue(null)]
        public DateField ToDate
        {
            get
            {
                return this.toDate;
            }
        }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DefaultValue(null)]
        public Ext.Net.Label Label
        {
            get
            {
                return this.label;
            }
        }
    }

    private DateRange dr1;
    private DateRange dr2;
    protected void Page_Load(object sender, EventArgs e)
    {
        dr1 = new DateRange
        {
            ID = "DateRange1",
            FieldLabel = "DateRange1"
        };

        dr2 = new DateRange
        {
            ID = "DateRange2",
            FieldLabel = "DateRange2"
        };
        
        this.Form.Controls.Add(dr1);
        this.Form.Controls.Add(dr2);
    }

    protected void GetRange(object sender, DirectEventArgs e)
    {
        X.Js.Alert(string.Format("From: {0} To: {1}", dr2.FromDate.SelectedDate.ToShortDateString(), dr2.ToDate.SelectedDate.ToShortDateString()));
    }
</script>

<!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" />       
        
        <ext:Button runat="server" Text="Get Range1 on client side">
            <Listeners>
                <Click Handler="alert('From: ' + #{DateRange1}.fields[0].getValue() + '\nTo: ' + #{DateRange1}.fields[2].getValue());" />
            </Listeners>
        </ext:Button>
        
         <ext:Button runat="server" Text="Get Range2 on server side">
           <DirectEvents>
              <Click OnEvent="GetRange" />
           </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>

2. Second sample demonstrates MultiField inside user control. If you place several user control inside page then you cannot use #{} syntax to get control in the user control. You have to add property in the user control which will give required control and use code behind to get it

UserControl

<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public DateField FromDateControl
    {
        get
        {
            return this.FromDate;
        }
    }

    public DateField ToDateControl
    {
        get
        {
            return this.ToDate;
        }
    }

    public MultiField MultiFieldControl
    {
        get
        {
            return this.MultiField1;
        }
    }
</script>

<ext:MultiField ID="MultiField1" runat="server" FieldLabel="Test" Cls="nowrap-group">
    <Fields>
        <ext:DateField runat="server" ID="FromDate" Vtype="daterange" Width="80" />
        <ext:Label ID="Label1" runat="server" Text="to" ForID="ToDate" Width="10" />
        <ext:DateField runat="server" ID="ToDate" Vtype="daterange" Width="80">
            <Listeners>
                <Render Handler="this.startDateField = '#{FromDate}'; #{FromDate}.endDateField = '#{ToDate}';" />
            </Listeners>
        </ext:DateField>
    </Fields>
</ext:MultiField>

Test sample

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="TempUC.ascx" TagPrefix="tmp" TagName="DateRangeUC"  %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Listeners.Click.Handler = string.Format("alert('From: ' + {0}.fields[0].getValue() + '\\nTo: ' + {0}.fields[2].getValue());", DateRange1.MultiFieldControl.ClientID);
    }
    
    protected void GetRange(object sender, DirectEventArgs e)
    {
        X.Js.Alert(string.Format("From: {0} To: {1}", DateRange2.FromDateControl.SelectedDate.ToShortDateString(), DateRange2.ToDateControl.SelectedDate.ToShortDateString()));
    }
</script>

<!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" />       
        
        <ext:Button ID="Button1" runat="server" Text="Get Range1 on client side">
        </ext:Button>
        
         <ext:Button runat="server" Text="Get Range2 on server side">
           <DirectEvents>
              <Click OnEvent="GetRange" />
           </DirectEvents>
        </ext:Button>
        
        <tmp:DateRangeUC ID="DateRange1" runat="server" />
        <tmp:DateRangeUC ID="DateRange2" runat="server" />
    </form>
</body>
</html>

[bsnezw]

#1 was perfect.

This will be much easier to drop in markup vs having the extra panels/content tags around the user controls. This has given me ideas of how to change some other user controls into extended controls too.

You should add this one to the UX project. It is a great example of how to extend the multifield. If you do I would suggest making a note of it in the existing date range example so others can see how simple it is to progress to extended controls.

Thanks!