Get Coolite Element with Javascript

  1. #1

    Get Coolite Element with Javascript

    Hi ...

    I've noticed that I just couldn't get a Coolite Panel with a Javascript Function. The reason is that, in OnLoad, I want to resize a Coolite Panel, according to the screen size of the client.

    For example: the javascript code below:

    var paneltree = document.getElementById('CoolPanelPrincipal');
    paneltree.style.height = screen.height;
    doesn't work, because the var "paneltree" is always null.

    If, instead, I use the code below:
    var paneltree = document.getElementById('ctl00_CoolPanelPrincipal_Content');
    paneltree.style.height = screen.height;
    I can get the CoolPanel and change its height.

    My question is:
    Is there's a way to get a Coolite element with javascript, without specify the "clientid" directly ?

    I just dont' want to use .getElementById('ctl00_CoolPanelPrincipal_Content' );

    It doesn't seem to be the right way to do it ... Am I right ?

    Thanks and best regards. You really do an excellent work with Coolite.
    Alfonso Penunuri.
  2. #2

    RE: Get Coolite Element with Javascript



    Hi Alfonso,

    You can get an instance of the controls (in JavaScript) a couple different ways, although each will require that you either reference or know the controls client-side ID.

    First off, by default, a direct instance of each control is avaialable by referencing it's ID. For example, if the server-side ID of the Panel control is "CoolPanelPrincipal", the client-side instance is also "CoolPanelPrincipal", UNLESS the control is inside an INamingContainer.

    If the control is placed inside another control which inherits from INamingContainer (MasterPage, Repeater, GridView, etc), the client-side ID of the control will be renamed to ensure a unique ID. This renaming is handled automatically by the .NET framework.

    The following example demonstrates how to set the width of the "CoolPanelPrincipal" control.

    Example

    CoolPanelPrincipal.setWidth(400);
    Based on your code sample above, it does appear your controls are inside an INamingContainer (MasterPage?), so you will have to use the full client-side id.

    Example

    ctl00_CoolPanelPrincipal.setWidth(400);
    The following code sample demonstrates how you can set the width of the Panel to the width of the Body.

    Example

    ctl00_CoolPanelPrincipal.setWidth(Ext.getBody().getWidth());
    You can also get and instance of the control in JavaScript by using the Ext.getCmp function.

    Example

    var paneltree = Ext.getCmp("ctl00_CoolPanelPrincipal");
    paneltree.setWidth(400);
    The following sample demonstrates how you can use the server-side id to replace the "client-side" id string with .ClientID property.

    Example

    var paneltree = Ext.getCmp("<%=Window1.ClientID %>");
    paneltree.setWidth(400);
    
    // Or shortened to...
    <%=Window1.ClientID %>.setWidth(400);
    I would also highly recommend browsing through the following Ext.Element documentation, see http://extjs.com/deploy/dev/docs/?class=Ext.Element

    Hope this helps.

    Geoffrey McGill
    Founder
  3. #3

    RE: Get Coolite Element with Javascript

    Awesome !!!

    That works very good !!!

    Thanks for your quickly and excellent response.

    Again ... thank's for your support and excellent job with Coolite ...

    Best regards
  4. #4

    RE: Get Coolite Element with Javascript



    Hi I have the same question.

    I create a control that have a coolite window control that is displayed when I click on a button control on a web page.

    The coolite window control has a text box and 9 link button, when I give click on a LinkButton, this linkbutton calls a function in javascript which allows to set a value in the text box.
    This function is on the page that launches the window control.

    The problem is that the coolite window control is created dynamically on the server side but I need to get control on the client side. The following code works but I want to know if it is possible to get the id otherwise than as is currently.

    I use 'cacAutorizationCode_txtCode'. But I just dont' want to use .getElementById('cacAutorizationCode_txtCode'); because when I change the position of the control this name changes too.

    The code is the following...

    AuthControl:

        [DefaultProperty("Code")]
        [ToolboxData("<{0}:COBISAuthControl runat=server></{0}:COBISAuthControl>")]
        public class AuthControl : System.Web.UI.WebControls.WebControl, INamingContainer
        {
    
    
            private Coolite.Ext.Web.TextField txtCode = new Coolite.Ext.Web.TextField();
            private Coolite.Ext.Web.Label lblCell = new Coolite.Ext.Web.Label();
            private Coolite.Ext.Web.Label lblNameCell = new Coolite.Ext.Web.Label();
            private Coolite.Ext.Web.Button btnConfirmar = new Coolite.Ext.Web.Button();
            private Coolite.Ext.Web.Button btnCancelar = new Coolite.Ext.Web.Button();
    
    
            private Coolite.Ext.Web.Window window = new Coolite.Ext.Web.Window();
    
    
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
            }
    
    
            protected override void OnLoad(System.EventArgs e)
            {
                base.OnLoad(e);
                this.EnableViewState = true;
                btnConfirmar.AjaxEvents.Click.Event += new ComponentAjaxEvent.AjaxEventHandler(Click_Event);
                btnCancelar.AjaxEvents.Click.Event += new ComponentAjaxEvent.AjaxEventHandler(CancelClick_Event);
    
    
                txtCode.ID = "txtCode";
                txtCode.AutoPostBack = false;
                txtCode.EnableViewState = true;
                txtCode.Attributes.Add("readonly", "true");
                txtCode.InputType = Coolite.Ext.Web.InputType.Password;
    
    
                lblCell.EnableViewState = true;
                btnConfirmar.EnableViewState = true;
                btnCancelar.EnableViewState = true;
    
    
    
                window.Modal = true;
                window.Floating = true;
                window.Shadow = Coolite.Ext.Web.ShadowMode.Drop;
                window.AutoHeight = true;
                window.ButtonAlign = Coolite.Ext.Web.Alignment.Center;
                window.BodyStyle = "padding: 6px;";
                window.Resizable = false;
                window.Closable = false;
                window.Width = Unit.Pixel(300);
                window.Height = Unit.Pixel(620);
                window.ID = "Window1";
               
            }
    
    
            void Click_Event(object sender, AjaxEventArgs e)
            {
                window.CloseAction = Coolite.Ext.Web.CloseAction.Close;
                window.Close();
            }
    
    
            void CancelClick_Event(object sender, AjaxEventArgs e)
            {
               window.CloseAction = Coolite.Ext.Web.CloseAction.Close;
               window.Close();
            }
    
    
    
            protected override void CreateChildControls()
            {
                base.CreateChildControls();
    
    
                window.BodyControls.Add(new LiteralControl(""));
                window.BodyControls.Add(lblNameCell);
                window.BodyControls.Add(new LiteralControl(""));
                window.BodyControls.Add(new LiteralControl("&amp;nbsp;"));
                window.BodyControls.Add(new LiteralControl("&amp;nbsp;"));
                window.BodyControls.Add(lblCell);
                window.BodyControls.Add(new LiteralControl("<br />"));
                window.BodyControls.Add(new LiteralControl("<br />"));
                window.BodyControls.Add(txtCode);
                window.BodyControls.Add(new LiteralControl("<br />"));
                window.BodyControls.Add(new LiteralControl("<br />"));
    
    
                Coolite.Ext.Web.LinkButton button1 = null;
    
    
                if (showKeyBoard)
                {
                    window.BodyControls.Add(new LiteralControl(""));
                    int val;
                    for (int i = 0; i < 6; i++)
                    {
                        val = i + 1;
                        button1 = new Coolite.Ext.Web.LinkButton();
                        button1.ID = "lnl" + (val).ToString();
                        button1.Text = (val).ToString();
                        button1.CssClass = "primary-link-button";
                        button1.OnClientClick = "put(" + val + "); return false;";
                        window.BodyControls.Add(button1);
                    }
    
    
                    window.BodyControls.Add(new LiteralControl("<br />"));
    
    
                    for (int i = 6; i < 9; i++)
                    {
                        val = i + 1;
                        button1 = new Coolite.Ext.Web.LinkButton();
                        button1.ID = "lnl" + (val).ToString();
                        button1.Text = (val).ToString();
                        button1.CssClass = "primary-link-button";
                        button1.OnClientClick = "put(" + val + "); return false;";
                        window.BodyControls.Add(button1);
                    }
                    
                    button1 = new Coolite.Ext.Web.LinkButton();
                    button1.ID = "lnl" + (10).ToString();
                    button1.Text = (0).ToString();
                    button1.CssClass = "primary-link-button";
                    button1.OnClientClick = "put(" + 0 + "); return false;";
                    window.BodyControls.Add(button1);
    
    
                    button1 = new Coolite.Ext.Web.LinkButton();
                    button1.ID = "lnl" + (11).ToString();
                    button1.Text = "Borrar";
                    button1.CssClass = "primary-link-button";
                    button1.OnClientClick = "put(" + 99 + "); return false;";
    
    
                    window.BodyControls.Add(button1);
                    window.BodyControls.Add(new LiteralControl("
    "));
                }
                window.BodyControls.Add(new LiteralControl("<br />"));
                window.BodyControls.Add(new LiteralControl("<br />"));
    
    
                window.BodyControls.Add(btnConfirmar);
    
    
                window.BodyControls.Add(new LiteralControl("&amp;nbsp;"));
    
    
                window.BodyControls.Add(btnCancelar);
    
    
                this.Controls.Add(window);
    
    
            }
    WebPage Code:

    Javascript Function:
    
    
    
    <script type="text/javascript">
    
    
    // put: a¤ade uno por uno los numeros insertados por el usuario
    
    
    function put(value) 
    
    
    {
    
    
    if (value == 99) 
    
    
    {
    
    
    var temp = &#100;ocument.getElementById('acAutorizationCode_txtCode').value;
    
    
    &#100;ocument.getElementById('cacAutorizationCode_txtCode').value = temp.substring(0, temp.length - 1);
    
    
    }
    
    
    else 
    
    
    {
    
    
    &#100;ocument.getElementById('acAutorizationCode_txtCode').value = &#100;ocument.getElementById('acAutorizationCode_txtCode').value + value;
    
    
    }
    
    
    } 
    
    
    </script>
    Page Code:

    
    
    
    <body>
    
    
    <form id="form1" runat="server">
    
    
    
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    
    
    </ext:ScriptManager>
    
    
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    
    
    </asp:ScriptManager>
    
    
    
    
    
    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Aceptar</asp:LinkButton>
    
    
    <asp:Panel ID="AuthControlPanel" runat="server" Visible="false" >
    
    
    </asp:Panel>
    
    
    
    
    
    
    </form>
    
    
    </body>
    Server side Code:

    
    
    
    public partial class Default2 : System.Web.UI.Page
    
    
    {
    
    
    COBISAuthControl authControl = new COBISAuthControl();
    
    
    protected void Page_Load(object sender, EventArgs e)
    
    
    {
    
    
    
    
    
    }
    
    
    protected void LinkButton1_Click(object sender, EventArgs e)
    
    
    {
    
    
    authControl.ID = "acAutorizationCode";
    
    
    authControl.EnableViewState = true;
    
    
    authControl.WindowTitle = "Authorization Control";
    
    
    authControl.LabelCode = "Code:";
    
    
    authControl.ConfirmButtonText = "Confirm";
    
    
    authControl.CloseButtonText = "Close";
    
    
    this.AuthControlPanel.Visible = true;
    
    
    this.AuthControlPanel.Controls.Add(authControl);
    
    
    }
    
    
    }

Similar Threads

  1. Replies: 2
    Last Post: Jun 24, 2010, 8:58 PM
  2. Replies: 5
    Last Post: Aug 26, 2009, 2:48 PM
  3. is javascript debugging possible with coolite
    By joydeepsen in forum 1.x Help
    Replies: 1
    Last Post: Jun 12, 2009, 12:16 PM
  4. Forms Coolite or Javascript
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Nov 07, 2008, 7:22 AM
  5. Replies: 8
    Last Post: Jun 11, 2008, 10:58 AM

Posting Permissions