What's New?

[CLOSED] Can't access a slider field during client-side onload

  1. #1
    Jan 28, 2011, 7:25 PM

    [CLOSED] Can't access a slider field during client-side onload

    Hello,

    Any idea why I can't access a slider field from javascript that's being fired on page load?

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void SubmitColor(object sender, DirectEventArgs e)
    {
        X.Js.Alert("Color: " + System.Drawing.Color.FromArgb(RedSlider.Slider.Value, GreenSlider.Slider.Value, BlueSlider.Slider.Value).ToString());
    }
</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>SliderField - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <ext:XScript ID="XScript1" runat="server">
    <script type="text/javascript">
        var toHex = function (value) {
            var str = value.toString(16);

            if (str.length == 1) {
                str = "0" + str;
            }

            return str;
        };

        var updateColor = function () {
            var color = "#" +
                toHex(RedSlider.getValue().toString(16)) +
                toHex(GreenSlider.getValue().toString(16)) +
                toHex(BlueSlider.getValue().toString(16));

            color = color.toUpperCase();

            ColorPreview.setTitle("Color: " + color);
            ColorPreview.body.setStyle("background-color", color);
        };

        function slideZoom() {
            var myZoom = #{sliderZoom}.getValue(); 
            alert("Zoom = " + myZoom);
        }

        function doLoadStuff() {
            alert("Loading...")
            var myZoom = #{sliderZoom}.getValue(); 
            alert("Zoom = " + myZoom);
        }

                function addEvent(obj, evType, fn){ 
            if (obj.addEventListener){ 
                    obj.addEventListener(evType, fn, false); 
                    return true; 
                } else if (obj.attachEvent){ 
                    var r = obj.attachEvent("on"+evType, fn); 
                    return r; 
                } else { 
                    return false; 
                } 
        }


        addEvent(window,'load',doLoadStuff);

    </script>
    </ext:XScript>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <h1>
        SliderField</h1>
    <ext:FormPanel ID="FormPanel1" runat="server" Title="Color Chooser" Width="400" Height="250"
        ButtonAlign="Left" Padding="10">
        <Items>
            <ext:SliderField ID="sliderZoom" runat="server" Width="200" IndicatorTip="ZoomTODO">
                <Slider ID="slider1" runat="server" MinValue="20" MaxValue="200" Value="100" Increment="10">
                    <Listeners>
                        <Change Fn="slideZoom" />
                    </Listeners>
                    <Plugins>
                        <ext:SliderTip ID="slidertip1" runat="server">
                            <GetText Fn="function (slider) {return String.format('<b>{0} %</b>', slider.value);}" />
                        </ext:SliderTip>
                    </Plugins>
                </Slider>
            </ext:SliderField>
            <ext:SliderField ID="RedSlider" runat="server" FieldLabel="Red" LabelStyle="color:red">
                <Slider runat="server" MaxValue="255" Value="255">
                    <Listeners>
                        <Change Fn="updateColor" />
                    </Listeners>
                    <Plugins>
                        <ext:SliderTip runat="server">
                            <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                        </ext:SliderTip>
                    </Plugins>
                </Slider>
            </ext:SliderField>
            <ext:SliderField ID="GreenSlider" runat="server" FieldLabel="Green" LabelStyle="color:green">
                <Slider runat="server" MaxValue="255" Value="255">
                    <Listeners>
                        <Change Fn="updateColor" />
                    </Listeners>
                    <Plugins>
                        <ext:SliderTip runat="server">
                            <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                        </ext:SliderTip>
                    </Plugins>
                </Slider>
            </ext:SliderField>
            <ext:SliderField ID="BlueSlider" runat="server" FieldLabel="Blue" LabelStyle="color:blue">
                <Slider runat="server" MaxValue="255" Value="255">
                    <Listeners>
                        <Change Fn="updateColor" />
                    </Listeners>
                    <Plugins>
                        <ext:SliderTip runat="server">
                            <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                        </ext:SliderTip>
                    </Plugins>
                </Slider>
            </ext:SliderField>
            <ext:Panel ID="ColorPreview" runat="server" Title="Color: #FFFFFF" Border="false"
                StyleSpec="margin:10px;" Height="75" />
        </Items>
        <FooterBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Max All">
                        <Listeners>
                            <Click Handler="FormPanel1.getForm().items.each(function (c) { c.setValue(255); });" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="Min All">
                        <Listeners>
                            <Click Handler="FormPanel1.getForm().items.each(function (c) { c.setValue(0); });" />
                        </Listeners>
                    </ext:Button>
                    <ext:ToolbarFill runat="server" />
                    <ext:Button runat="server" Text="Save">
                        <DirectEvents>
                            <Click OnEvent="SubmitColor" />
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button runat="server" Text="Reset">
                        <Listeners>
                            <Click Handler="FormPanel1.getForm().reset();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </FooterBar>
    </ext:FormPanel>
    </form>
</body>
</html>
    Thanks,
    Eric
    Last edited by Daniil; Feb 02, 2011 at 10:36 AM. Reason: [CLOSED]
  2. #2
    Jan 30, 2011, 10:48 AM
    Hi,

    You have the exception because slider fields are not rendered yet. Mode 'doLoadStuff' method calling to DocumentReady event handler of ResourceManager
    <ext:ResourceManager ID="ResourceManager1" runat="server">
        <Listeners>
            <DocumentReady Handler="doLoadStuff();" />
        </Listeners>
    </ext:ResourceManager>
  3. #3
    Jan 31, 2011, 3:27 AM
    Quote Originally Posted by Vladimir View Post
    Hi,

    You have the exception because slider fields are not rendered yet. Mode 'doLoadStuff' method calling to DocumentReady event handler of ResourceManager
    <ext:ResourceManager ID="ResourceManager1" runat="server">
        <Listeners>
            <DocumentReady Handler="doLoadStuff();" />
        </Listeners>
    </ext:ResourceManager>
    In my real application, the .aspx is actually an .ascx and the resourcemanger is on the calling page. How do I add a handler in this case?

    In my controls init method I tried 
            Dim myResourceManager = DirectCast(Me.Parent.FindControl("ResourceManager1"), Ext.Net.ResourceManager)
       myResourceManager.Listeners.DocumentReady.Handler.Insert(myResourceManager.Listeners.DocumentReady.Handler.Count, "doLoadStuff();")
    It doesn't work.
    I see that I also have a myResourceManager.Listeners.DocumentReady.Fn
  4. #4
    Jan 31, 2011, 7:26 AM
    Hi,

    In this case you can use AfterRender event of FormPanel
  5. #5
    Jan 31, 2011, 6:13 PM
    Vladimir,

    I tried adding a:

        <ext:FormPanel runat="server">
    <Listeners>
        <AfterRender Fn="doLoadStuff" />
    </Listeners>
    <Content>
    to my .ascx. However, I'm still getting an "'ContentPH_uc1006_sliderZoom' is undefined" error when I try to do a setValue on my SliderField, so it looks like the AfterRender event is being fired to late.

    Doing things the way I was, with the following code in my .ascx file's markup:

            function addEvent(obj, evType, fn){ 
            if (obj.addEventListener){ 
                    obj.addEventListener(evType, fn, false); 
                    return true; 
                } else if (obj.attachEvent){ 
                    var r = obj.attachEvent("on"+evType, fn); 
                    return r; 
                } else { 
                    return false; 
                } 
        }

        addEvent(window,'load',doLoadStuff);
    Works 95% of the the time, but sometimes it fails, I believe there's some kind of race condition.

    -Eric
  6. #6
    Jan 31, 2011, 7:38 PM
    Hi,

    Well, you did not provide real test sample therefore I cannot 100% advise
    Try AfterLayout event, this event is called after layout when all children are rendered
    <AfterLayout Fn="doStuff" Single="true" />

Similar Threads

  1. Trigger click event on Slider field
    By Birgit in forum 1.x Help
    Replies: 2
    Last Post: Feb 29, 2012, 7:22 AM
  2. [CLOSED] How to access the property of user control in client side (by javascript)
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 28, 2011, 4:43 PM
  3. Access client-side added tree nodes in DirectMethod?
    By wexman in forum 1.x Help
    Replies: 2
    Last Post: Mar 28, 2011, 9:20 AM
  4. [CLOSED] Adding Items to Store Client-side, want to retrieve server side
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 01, 2010, 5:14 PM
  5. Grid Client Transactions(Client side insert/edit/delete)
    By kumarxlnt in forum 1.x Help
    Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM

Posting Permissions