How to get a panel from JavaScript

  1. #1

    How to get a panel from JavaScript

    Hi everybody,

    first I would like to congratulations for this very powerfull Framework.

    I have a problem with Ext.NET. That is my Page:

    <%@ 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>Ext.NET - Sample</title>
    
        <script language="javascript" type="text/javascript">
    
            function init() {
    
                var plugInPanel_Container = document.getElementById("plugIn");
                if (plugInPanel_Container != null)
                    plugInPanel_Container.style.height = "100%";
            }
    
            function sucessCallBack(result) {
                //Some Action
            }
    
            function failureCallBack(result) {
                //Some Action
            }
    
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server" onload="init();">
        
            <ext:resourcemanager id="ResourceManager1" runat="server"></ext:resourcemanager>
        
            <ext:viewport id="Viewport1" runat="server" layout="border">
                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <west collapsible="true" split="true">
                            <ext:Window ID="Window1" runat="server" Collapsible="true" Height="185" Icon="Application" Title="Title" Width="350">
                                <Items>
                                </Items>
                            </ext:Window>
                        </west>
                        <center>
                            <ext:Panel ID="Panel4" runat="server" Title="Center">
                                <Items>
                                    <ext:Toolbar ID="Toolbar2" runat="server">
                                        <Items>
                                            <ext:Button ID="Button1" alt="teste....." runat="server" EnableToggle="true" Text="" Pressed="false"  Type="Button" OnClientClick="" />
                                            <ext:ToolbarSeparator />
                                        </Items>
                                    </ext:Toolbar>
    
                                    <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
                                        <Items>
                                            <ext:Panel ID="plugIn" runat="server" Closable="true" Title="Tab 1">
                                            </ext:Panel>
                                        </Items>
                                    </ext:TabPanel>
    
                                </Items>
                            </ext:Panel>
                        </center>
                    </ext:BorderLayout>
                </Items>
            </ext:viewport>
    
        </form>
    </body>
    </html>
    When the page finish the load, I just want get the Panel "plugIn" from a JavaScript, but always return null. When I see the page source from the Browser the panel isn't rendered.

    How can I get the Panel plugIn from JavaScript? Or How can I force the render od the plugIn Panel?

    Thanks.
  2. #2
    Hi,

    You can reference an instance of the Panel object by using it's client-side id. You do not (and cannot) us .getElementById to get an instance. All components are instantiated on the client using the components .ClientID property.

    Example

    plugIn.setHeight(500);
    Please note, the .setHeight() function does not accept a percentage, only an int (px).

    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Hi Geoffrey,

    thankyou for you reply, but now I understand what is happening.

    The JavaScript on page is starting before the render of the components. I made a test putting a button and fireing the init() script from the buton's click and everything works well.

    My problemn is that I need to start this script just after the render of the components. Are there some script to do that?

    Thanks.

Similar Threads

  1. Problem with Panel Load From JavaScript
    By osef in forum 2.x Help
    Replies: 0
    Last Post: Jun 02, 2012, 6:09 AM
  2. Expand Panel with Javascript?
    By simonmicheal in forum 1.x Help
    Replies: 1
    Last Post: Oct 06, 2009, 12:27 PM
  3. IE7 Update Panel javascript error with Mono
    By cristianpsg in forum Bugs
    Replies: 0
    Last Post: Apr 30, 2009, 1:27 PM
  4. [CLOSED] Add innerHTML to panel in javascript?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 03, 2009, 11:00 AM
  5. [CLOSED] change bodyStyle on panel in Javascript
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 03, 2009, 6:51 AM

Tags for this Thread

Posting Permissions