PDA

View Full Version : .aspx page stop working after adding Ext.BorderLayout



katanasov
19 Oct 2007, 2:57 PM
Hi,

I am developing one form (.aspx) with a couple of dozens of fields and 1 grid. The page was ready on 90% when I decide to use Ext.BorderLayout and I created 3 different Content Panels (1 containing the menu buttons, 1 for all of the fields and 1 for the grid), so the application become really nice and user friendly. As all of the content panels are collapsible and resizable the users can switch between the fields, menu and the grid or they can see all of them on the same page.

The problem is that when I added this Ext.BorderLayout the .aspx page stopped working. All of the buttons and the drop downs are not submitting the page. I suppose that somehow ExtJs is overriding the handlers.

Here is the .aspx page (most of the fields are removed, as it is big forms)



<body onkeypress="KeyPress()" onmousewheel="return false;" onload="loadUserPreferences(); initLayout();">
<FORM id="ApStInv" action="" method="post" runat="server" autocomplete="off">
<div id="container">
<div id="nav" align="center" class="x-layout-inactive-content">
<table border="0" cellspacing="10" width="22">
<tr>
<td align="center">
<a href="javascript: loadCSS(1)"><img src="resources/images/text_heading_1.png" title="Small Font Size" /></a><br />
<a href="javascript: loadCSS(2)"><img src="resources/images/text_heading_2.png" title="Medium Font Size" /></a><br />
<a href="javascript: loadCSS(3)"><img src="resources/images/text_heading_3.png" title="Llarge Font Size" /></a>
<hr width="100%">
<div id="btnResetSettings">
<img src="resources/images/wand.png" title="Reset Layout" /></div>
</td>
</tr>
</table>
</div>
<div id="content" class="x-layout-inactive-content">
</div>
<div id="inner1" class="x-layout-inactive-content">
<asp:datagrid id="dgAcctCtr" tabIndex="116" runat="server" CssClass="GridStyle" ToolTip="Account/Center distribution"
AutoGenerateColumns="False" ShowFooter="True" PageSize="1">
<EditItemStyle BackColor="Gainsboro"></EditItemStyle>
<AlternatingItemStyle BackColor="Transparent"></AlternatingItemStyle>
<HeaderStyle Font-Underline="True" Wrap="False" HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:TemplateColumn HeaderText="MiniChart">
<ItemTemplate>
<asp:TextBox id=txtMiniChart tabIndex=200 runat="server" CssClass="GridMiniTextBox" ToolTip="Enter a mini-chart code instead of account/center - system will display related account/center" Text='<%# DataBinder.Eval(Container, "DataItem.MiniChart") %>' MaxLength="3" Columns="3" Wrap="False">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
</div>
<div id="inner2" class="x-layout-inactive-content">
<TABLE id="OutterLayoutTable" cellspacing="0" cellpadding="5" border="0" width="99%">
<TR>
<TD>
<TABLE id="InnerLayoutTable" tabindex="-1" cellspacing="0" cellpadding="0" border="2" width="100%">
<TR>
<td class="LogoBkGrnd" colSpan="2"><IMG alt="Isuzu Workflow Logo" src=".\Images\AP_Workflow_Logo.jpg" class="Logo">
<br>
<asp:label id="lblFormNameHdg" runat="server" CssClass="BodyTitle">AP Standard Invoice Approval</asp:label>
<asp:label id="Label2" tabIndex="-1" runat="server" CssClass="HdgLbls" Font-Bold="True">DCN: </asp:label>
<asp:label id="lblDCN" runat="server" CssClass="DataLabels" ToolTip="Document Control Number - uniquely identifies the document"></asp:label></td>
</TR>
<TR>
<td>
<table width="60%" align="left" style="position: relative; float: left; border: 1px solid black;">
<tr>
<td>
<asp:label id="lblMgrHdg" runat="server" CssClass="HdgLbls" Font-Bold="True" ToolTip="Use default manager or select another manager from the drop down list">Appr Manager </asp:label>
<asp:dropdownlist id="cboApprMgr" tabIndex="-1" runat="server" CssClass="DropDown" OnSelectedIndexChanged="cboApprMgr_IndexChanged"
AutoPostBack="True"></asp:dropdownlist>
<asp:label id="lblOrigHeading" runat="server" CssClass="HdgLbls" Font-Bold="True">Originator</asp:label>
</td>
</tr>
</table>
</td>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</div>
<div id="inner1right" class="x-layout-inactive-content" style="height: 99%;">
<uc1:TifViewer id="uc" runat="server"></uc1:TifViewer>
</div>
</div>
</FORM>
<script type="text/javascript" src="resources/ext-1.1/yui-utilities.js"></script>
<script type="text/javascript" src="resources/ext-1.1/ext-base.js"></script>
<script type="text/javascript" src="resources/ext-1.1/ext-all.js"></script>
<script type="text/javascript" src="resources/js/Main.js"></script>
<script src="resources/js/Slider.js" type="text/javascript"></script>
<script src="resources/js/TifViewer.js" type="text/javascript"></script>
</body>



Any ideas for workaround? As I don't have time to rewrite the entire form and start using only ExtJs controls and build dynamic ExtJs form. Any idea how to make this page works as normal asp.net page and only use ExtJs for creating the global layout.

devnull
19 Oct 2007, 3:19 PM
not sure if its really possible, any workaround method is likely gonna take just as long.
this is kinda like getting a new car and saying "i dont have time to put gas in it, i just wanna drive it" ;)

katanasov
22 Oct 2007, 7:21 AM
not sure if its really possible, any workaround method is likely gonna take just as long.
this is kinda like getting a new car and saying "i don't have time to put gas in it, i just wanna drive it" ;)

About the car... - it's not true at all.... (:|

there is workaround - the content panel will display the content of the .aspx page in iframe, so you can still keep the normal behavior of the .aspx page + having the advantage of ExtJs tools.
But this is "ugly" solution - the page loads extremely slow, as I had to put 3 different iframes.
That's why I wanted to know is it possible to do it using different approach.