Date Range in a user control

[Vinci]

I have a user control contain date range input and define as below

        ...
        <ext:Panel ID="pnlFrom" runat="server" Layout="FormLayout" ColumnWidth="0.30">
            <Items>
                <ext:DateField ID="dtpDteFr" runat="server" Vtype="daterange" EnableKeyEvents="true">                  
                    <Listeners>
                        <Render Handler="this.endDateField = '#{dtpDteTo}'" />
                    </Listeners>
                    
                </ext:DateField>
            </Items>
        </ext:Panel>
      ...
         <ext:Panel ID="pnlTo" runat="server" Layout="FormLayout" ColumnWidth="0.30">
            <Items>
                <ext:DateField ID="dtpDteTo" runat="server" Vtype="daterange" EnableKeyEvents="true">         
                    <Listeners>
                        <Render Handler="this.startDateField = '#{dtpDteFr}'" />
                    </Listeners>
                </ext:DateField>
            </Items>
         </ext:Panel>
      ...

During running it have error in the JS part.

var end=Ext.getCmp(field.endDateField);
this.dateRangeMin=date;
end.setMinValue(date); <== program broke at here

This JS seems auto-gen by ext.net. When when I remove the setting of endDateField and startDateField, the problem disappear.

The problem is "end" is undefined.

I found that field.endDateField = "App.dtrDoc_dtpDteTo".

If I run Ext.getCmp("dtrDoc_dtpDteTo") in Immediate Window, I can get the component.

However Ext.getCmp("App.dtrDoc_dtpDteTo") get undefined.

Actually I try some alternate method in the demo

https://examples2.ext.net/#/Form/Dat...From-To_Range/

First I add a new web from in my project and just copy the code into it. It runs fine.

Then I change it to a user control and insert it to the same place of my date range, same problem occurred.

It seems that the ClientID of the control in user control have a prefix of "App.", but in JS part this "App." should be remove for Ext.getCmp().

Can anyone help? Thanks!

[Baidaly]

Hello!

Try to remove '#{}' syntax and use the following:

<Render Handler="this.startDateField = 'dtpDteFr';" />

[Vinci]

Hello!

Try to remove '#{}' syntax and use the following:

<Render Handler="this.startDateField = 'dtpDteFr';" />

Thanks for your reply!

I have try this, but still not work.

Ext.getCmp(field.endDateField) or say Ext.getCmp("dtpDteFr") still return undefined in JS.

It seems that field.endDateField should = "dtrDoc_dtpDteTo" to get the right result.

Actually "dtrDoc" is the ID for this user control inserted to the page.

  <ext:FieldSet ID="grpMain" runat="server" Title="_Title" ShrinkWrap="Both">
    <Content>
      <uc:DateRange ID="dtrDoc" runat="server" KeyId="DocDte" />
    </Content>
  </ext:FieldSet>

[Baidaly]

Yes, you should combine UserControl's ID and Control ID. Or set IDMode="Static".

Read the following thread: http://forums.ext.net/showthread.php?12957

[Vinci]

Yes, you should combine UserControl's ID and Control ID. Or set IDMode="Static".

Read the following thread: http://forums.ext.net/showthread.php?12957

Thank you for your help. It seems better to combine UserControl's ID and Control ID.

As it is very difficult to keep ID unique.

However, how can I achieve this?

Like my current code

<Render Handler="this.endDateField = '#{dtpDteTo}'" />

#{dtpDteTo} return "App.dtrDoc_dtpDteTo"

How can I get rid of the "App." prefix?

In my project IDMode="Static" really not a choice for me, as same user control may insert more than one time in same page.

Thank you again.

[Vinci]

Finally, I find a method to handle this stuff. Although I dun know if it is the best method.

Firstly I change the IDMode to Predictable in the ResourceManager of the page.

<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Predictable"/>

This part seems to be optional. As IDMode seems default set to Predictable.

Then remove listener property in designer.

 ...
  <ext:Panel ID="pnlFrom" runat="server" Layout="FormLayout" ColumnWidth="0.30">
      <Items>
          <ext:DateField ID="dtpDteFr" runat="server" Vtype="daterange" >                  

          </ext:DateField>
      </Items>
  </ext:Panel>
...
   <ext:Panel ID="pnlTo" runat="server" Layout="FormLayout" ColumnWidth="0.30">
      <Items>
          <ext:DateField ID="dtpDteTo" runat="server" Vtype="daterange" >         
          </ext:DateField>
      </Items>
   </ext:Panel>
...

Finally control the listener in the code behind instead of designer

            dtpDteFr.Listeners.Render.Handler = "this.endDateField='" + this.ID + "_" + dtpDteTo.ID + "'";
            dtpDteTo.Listeners.Render.Handler = "this.startDateField='" + this.ID + "_" + dtpDteFr.ID + "'";

[Daniil]

Another possible solution is here:
http://forums.ext.net/showthread.php?25464#post112357