PDA

View Full Version : [CLOSED] How to hide Panel sever side?



speedstepmem4
Dec 10, 2013, 10:21 AM
Hi,




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PanelHide.aspx.cs" Inherits="Samples_PanelHide" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
LoadPanel();
}


private const string tab1ID = "TabPnl1__Tab_Information";
private const string tab2ID = "TabPnl1__Tab_View";


public void LoadPanel()
{
this.TabPnl1.AddScript("document.getElementById('" + tab2ID + "').style.display = 'none'; ");
this.TabPnl1.AddScript("document.getElementById('" + tab1ID + "').style.display = '';");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Panel ID="samplePanel" runat="server" Region="Center" Height="200">
<Content>
<table>
<tr>
<td>
<ext:TabPanel ID="TabPnl1" runat="server" Height="200">
<Items>
<ext:Panel ID="Tab_Information" runat="server" Title="Information">
<Items>
<ext:HtmlEditor ID="HtmlEdr_Information" runat="server" FieldClass="edit-form" Height="130"
Width="1000">
</ext:HtmlEditor>
</Items>
</ext:Panel>
<ext:Panel ID="Tab_View" runat="server" Title="Information_View">
<Items>
<ext:HtmlEditor ID="HtmlEdr_Information1" runat="server" ReadOnly="true" CtCls="hide-toolbar"
Height="200" StyleSpec="border:0px" Width="1000">
</ext:HtmlEditor>
</Items>
</ext:Panel>
<ext:Panel ID="Tab_History" runat="server" Title="History">
<Items>
<ext:HtmlEditor ID="HtmlEdr_History" runat="server" ReadOnly="true" CtCls="hide-toolbar"
Height="200" Width="1000">
</ext:HtmlEditor>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</td>
</tr>
</table>
</Content>
</ext:Panel>
</div>
</form>
</body>
</html>






How to hide the Information_View panel using js in server side?

Daniil
Dec 10, 2013, 12:20 PM
Hi @speedstepmem4,

Please use a Panel's Hidden property.

speedstepmem4
Dec 10, 2013, 12:35 PM
Hi @speedstepmem4,

Please use a Panel's Hidden property.


Tab_View.Hidden=true;

Do we have to mention like this in server side?

Daniil
Dec 10, 2013, 12:44 PM
Yes, that is correct.

speedstepmem4
Dec 11, 2013, 4:10 AM
Yes, that is correct.

Hi Daniil,

As your suggestion, Panel's Hidden property is working fine.

Can you please suggest us what can we do instead of the below mentioned line?



this.TabPnl1.AddScript("document.getElementById('" + tab2ID + "').style.display = 'none'; ")
this.TabPnl1.AddScript("document.getElementById('" + tab1ID + "').style.display = '';");


And also kindly run the source code we provided and tell us the solution for that fix also..

geoffrey.mcgill
Dec 11, 2013, 4:39 AM
Can you please suggest us what can we do instead of the below mentioned line?



this.TabPnl1.AddScript("document.getElementById('" + tab2ID + "').style.display = 'none'; ")
this.TabPnl1.AddScript("document.getElementById('" + tab1ID + "').style.display = '';");


Because with Ext JS you run code against the client-side component instances, and not the underlying html dom elements. When you instruct a component to hide, it will determine how to hide itself.

I should also point out, this is how every JavaScript UI framework works, such as jQueryUI. You rarely (if ever) deal directly with the html dom elements.

speedstepmem4
Dec 11, 2013, 6:24 AM
Hi geoffrey,

Thank you for your guidance. Please mark it as Closed!