Using a javascript function for AutoLoad.TargetControl

  1. #1

    Using a javascript function for AutoLoad.TargetControl

    In the examples, there is this code:

                    <ext:Panel ID="ParentPanel" runat="server" Title="Deferred Loading of Internal Panels">
                        <Items>
                            <ext:Panel 
                                ID="InnerPanel1" 
                                runat="server" 
                                Title="Panel" 
                                Height="150">
                                 <%--TriggerControl can be js function also--%>
                                 <AutoLoad Url="Child.aspx" Mode="IFrame" ShowMask="true" TriggerControl="#{ParentPanel}" TriggerEvent="Activate" />
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
    I've tried using a js function, but apparently i don't know what i'm doing. I want to look at some control properties to decide whether to reload the Panel - something like this:

    function refreshGrid() 
    {
                    if(#{DetailForm}.record.get('ID') !=  #{HiddenField}.value)return true;
    }
  2. #2
    You js function has to return an object:

    For example:
    TriggerControl="function(){return ((#{hd}.getValue() == '1') ? #{hd} : #{ParentPanel});}"
    If you have to compare a value with the value of an hidden field you can, for example, return the hidden field if the panel hasn't to be loaded, otherwise if you want to load the panel you have to return the target triggercontrol that has the "Activate" triggerevent.

    Note that the Activate event will not fire on the hidden field.

    Here is sample code:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Ext1._Default" %>
    <%@ 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:Hidden ID="hd" runat="server" text="1"></ext:Hidden>    
          <ext:TabPanel ID="tp" runat="server">
            <Items> 
              <ext:Panel ID="pnl1" runat="server" Title="Panel 1"> </ext:Panel>
                <ext:Panel ID="ParentPanel" runat="server" Title="Parent panel">
                  <Items>
                    <ext:Panel ID="InnerPanel1" runat="server" 
                               Title="Panel" Height="150" StyleSpec="padding:5px;">
                      <AutoLoad Url="child.aspx" Mode="IFrame" ShowMask="true" 
                                TriggerControl="function(){return ((#{hd}.getValue() == '1') ? #{hd} : #{ParentPanel});}" 
                                TriggerEvent="Activate" />
                    </ext:Panel>
                  </Items>
                </ext:Panel>
            </Items>
          </ext:TabPanel>
        </form>
      </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: Jun 22, 2012, 3:06 PM
  2. Calling JavaScript function
    By UserClarion in forum 1.x Help
    Replies: 2
    Last Post: Dec 30, 2011, 11:23 AM
  3. [CLOSED] Call Javascript Function
    By speedstepmem4 in forum 1.x Premium Help
    Replies: 2
    Last Post: Jul 21, 2010, 4:58 AM
  4. [CLOSED] How to use #{...} syntax within javascript function
    By jmcantrell in forum 1.x Premium Help
    Replies: 3
    Last Post: Jun 21, 2010, 5:38 PM
  5. How i can html of tooltip in javascript function
    By vucuongkg in forum 1.x Help
    Replies: 1
    Last Post: Jun 17, 2010, 5:05 PM

Tags for this Thread

Posting Permissions