Aug 26, 2009, 8:31 AM
Can I access ext:hidden element from javascript
Hi all,
How could I access the Ext:Hidden value from javascript? I am trying to show/hide rows according to the rowcount value that is updated during the Page_Load. Ext.getCmp('rowCount') does not help me. or is this a purely my design problem that I have to use Ext components for the table? I try to keep things simple.
Provided a simplified version of the code as below. Thanks in advance.
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
<title>Test</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// read number of records from db
// update rowCount, rowCount.Text ="2";
// populate records
}
</script>
<script type="text/javascript">
function DisplayRow(rowID) {
var x = document.getElementById(rowID);
x.style.display = '';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server"/>
<ext:Panel ID="QualiPanel" runat="server" Title="Group1" AutoHeight="true">
<Body >
<ext:Hidden ID="rowCount" runat="server" Text="1" />
<table>
<tr id="row1" style="display:none">
<td>
<p>ROW1:</p>
<ext:TextField ID="txtField1" runat="server" Width="180" />
</td>
<td >
<p> Date:</p>
<ext:TextField ID="txtField2" runat="server" Width="60"/>
</td>
</tr>
<tr id="row2" style="display:none">
<td style="width:52%;">
<p>ROW2:</p>
<ext:TextField ID="txtField3" runat="server" Width="180" />
</td>
<td style="width:48%;" >
<p>Award Date:</p>
<ext:TextField ID="txtField4" runat="server" Width="60"/>
</td>
</tr>
</table>
</body>
</ext:Panel>
</form>
<script type="text/javascript">
// Ext.getCmp('rowCount'); does not do the job
// if row count is 1, it will not show row2.
// eg DisplayRow('row1');
</script>
</body>
</html>