What's New?

[CLOSED] [1.3] Execute Javascript function after rendering a DataView (on each render)

  1. #1
    Sep 07, 2012, 10:55 AM

    [CLOSED] [1.3] Execute Javascript function after rendering a DataView (on each render)

    Hello,

    I would like to know what Listener would execute right after rendering a DataView, but that is executed everytime the Data on the Store changes.

    The DataView is linked to a Store, but the Store's DataChanged listener doesn't fit our needs because after it executes, it takes a few seconds for the DataView to render.

    Our goal is to detect the document height everytime the DataView displays new information.
    Last edited by Daniil; Sep 07, 2012 at 1:44 PM. Reason: [CLOSED]
  2. #2
    Sep 07, 2012, 11:28 AM
    Hi,

    Here was a similar request.
    http://forums.ext.net/showthread.php?16526

    Please ask if you will be in trouble to implement. We will help.
  3. #3
    Sep 07, 2012, 12:00 PM
    Hello, I tried the following:
    <Listeners>
    <BeforeRender Handler="
            Ext.createSequence(#{Cruceros_DataView}.refresh, function()
            {
                alert('Refresh');
            });
        " />
</Listeners>
    However, it never calls that function. I'm not sure how to add functionallity to the refresh function.
  4. #4
    Sep 07, 2012, 12:35 PM
    Ok, I figured it out, I needed to override the curent refresh function. This is the final code:

    <Listeners>
    <BeforeRender Handler="
            #{Cruceros_DataView}.refresh = Ext.createSequence(#{Cruceros_DataView}.refresh, function()
            {
                alert('Refresh');
            });
        " />
</Listeners>
    Thanks.
  5. #5
    Sep 07, 2012, 1:43 PM
    That is right! Good job!

    Also you can globally override it and pass a refresh handler as a CustomConfig of any DataView on the page.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    private void DataBind()
    {
        string seconds = DateTime.Now.Second.ToString();
        
        Store store = this.DataView1.GetStore();
        store.DataSource = new object[]
            {
                new object[] { "test " + seconds },
                new object[] { "test " + seconds },
                new object[] { "test " + seconds }
            };
        store.DataBind();   
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.DataBind();
        }
    }

    protected void UpdateDataView(object sender, DirectEventArgs e)
    {
        this.DataBind();
    }
</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 runat="server">
    <title>Ext.NET Example</title>
    
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        Ext.DataView.prototype.refresh = Ext.createSequence(Ext.DataView.prototype.refresh, function () {
            if (this.refreshHandler) {
                this.refreshHandler();
            }
        });

        var someRefreshHandler = function () {
            alert("Hello from the refresh handler!");
        };
    </script>
 
    <style type="text/css">
        .my-dataview .my-item {
            color: Green;
        }
         
        .my-dataview .x-view-selected {
            background-color: Gray;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:DataView
        ID="DataView1"
        runat="server"
        AutoHeight="true"
        Cls="my-dataview"
        MultiSelect="true"
        ItemSelector="div.my-item">
        <CustomConfig>
            <ext:ConfigItem Name="refreshHandler" Value="someRefreshHandler" Mode="Raw" />
        </CustomConfig>
        <Store>
            <ext:Store runat="server" AutoLoad="false">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <Template runat="server">
            <Html>
                <tpl for=".">
                    <div class="my-item">{test}</div>
                </tpl>
            </Html>
        </Template>
    </ext:DataView>

    <ext:Button runat="server" Text="Update">
        <DirectEvents>
            <Click OnEvent="UpdateDataView" />
        </DirectEvents>
    </ext:Button>
</body>
</html>
    You can avoid double triggering on initial load if you wish.

Similar Threads

  1. Execute function after submitData is Failure
    By zhaoxl in forum 1.x Help
    Replies: 0
    Last Post: Aug 15, 2012, 3:39 AM
  2. [CLOSED] Execute function after submitData is done
    By imaa in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Nov 17, 2011, 7:50 AM
  3. [CLOSED] Dynamic usercontrol and execute javascript
    By Patman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 30, 2011, 4:50 PM
  4. [CLOSED] Execute javascript from Masterpage child
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 11, 2010, 8:32 AM
  5. Execute a code behind function for each gridRow in gridview
    By matmani in forum 1.x Help
    Replies: 4
    Last Post: Oct 20, 2009, 6:43 PM

Tags for this Thread

Posting Permissions