Get Coolite Element with Javascript

[apenunuri]

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.

[geoffrey.mcgill]

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.

[apenunuri]

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

[Mickna]

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);


}


}