PDA

View Full Version : [CLOSED] Window in viewport not working



RCM
Mar 07, 2012, 6:57 PM
Hi,

In Ext 1.0 we have an aspx page with the following code that works perfectly. But in V2 it throws a Ext.js javascript function parseNamespace. What coult be wrong.



<ext:ResourceManager runat="server" CleanResourceUrl="false">
</ext:ResourceManager>
<ext:Viewport ID="vpLogin" IDMode="Explicit" runat="server" >
<Items>
<ext:Window ID="windowLogin" runat="server" Closable="false" Resizable="false" Height="195"
Icon="Lock" Title="<%$ Resources:WebResources|Security.FormLabels, LoginControlsLoginText %>"
Draggable="true" Width="395" Modal="true" AutoHeight="true" Layout="Center"
LabelAlign="Top" Padding="5" DefaultButton="btnLogin" IDMode="Explicit">
<Items>
<ext:Panel ID="fpLogin" runat="server" FormID="formLogin" Border="false" Layout="form"
BodyStyle="background:transparent;" LabelAlign="Top" Height="115" >
<Items>
<ext:TextField ID="Username" runat="server" FieldLabel="<%$ Resources:WebResources|Security.FormLabels, LoginLabelUsernameText %>"
AllowBlank="true" AnchorHorizontal="100%" Text='' AutoFocus="true"
AutoFocusDelay="100" MaxLength="50" TabIndex="1" EnableKeyEvents="true" IDMode="Explicit"
AutoDataBind="true">

</ext:TextField>
<ext:TextField ID="Password" runat="server" InputType="Password" FieldLabel="<%$ Resources:WebResources|Security.FormLabels, LoginLabelPasswordText %>"
AllowBlank="true" AnchorHorizontal="100%" MaxLength="128" TabIndex="2" EnableKeyEvents="true"
IDMode="Explicit" AutoDataBind="true">
</ext:TextField>
<ext:LinkButton ID="ForgotPassword" runat="server" Text="<%$ Resources:WebResources|Security.FormLabels, LoginHyperLinkForgotYourPasswordText %>"
AnchorHorizontal="100%"
TabIndex="3" AutoDataBind="true" Disabled="false">
</ext:LinkButton>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="btnLogin" runat="server" TabIndex="4" Text="<%$ Resources:WebResources|Security.FormLabels, LoginControlsLoginText %>"
Disabled="true">

</ext:Button>
</Buttons>

</ext:Window>
</Items>
</ext:Viewport>

Vladimir
Mar 07, 2012, 7:12 PM
What a sense to place a window to Items collection?
It is floating element, place it outside ViewPort

RCM
Mar 07, 2012, 10:51 PM
Well this has always worked perfectly well in VI.

I place it in the viewport so that I can capture resize event and re-center the window in the viewport.

geoffrey.mcgill
Mar 08, 2012, 1:05 AM
Well this has always worked perfectly well in VI.

I place it in the viewport so that I can capture resize event and re-center the window in the viewport.

Including the Window inside the <Items> Collection of another Container should not work. I'm actually surprised we're not throwing an Exception under this scenario. It's something we'll look at including before the final v2 release.

Please move your Window Component outside of the <Items> Collection.

Vladimir
Mar 08, 2012, 12:28 PM
Hi,

Well, js error occurs because you use Layout="center"
Ext.Net v2 has no center layout (because ExtJS4 has no such layout). Please use VBox layout for centering (need to define Height and Width for item)


<ext:VBoxLayoutConfig Align="Center" Pack="Center" />


ExtJS4 (and Ext.Net v2) supports Window placing to Items collection. Please see
http://docs.sencha.com/ext-js/4-0/extjs-build/examples/window/window.html

But Window must be show manually (i guess we can add autoshow in next release), see window listener


<Added Handler="this.ownerCt.on('afterrender', this.show, this, {single:true});" />


Here is updated sample


<ext:Viewport ID="vpLogin" IDMode="Explicit" runat="server">
<Items>
<ext:Panel runat="server" Title="Title" />
<ext:Window ID="windowLogin" runat="server" Closable="false" Resizable="false" Height="195"
Icon="Lock" Title="Title" Draggable="true" Width="395" Modal="true" AutoHeight="true"
LabelAlign="Top" Padding="5" DefaultButton="btnLogin" IDMode="Explicit">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Panel ID="fpLogin" runat="server" FormID="formLogin" Border="false" Layout="AnchorLayout"
BodyStyle="background:transparent;" LabelAlign="Top" Height="115" Width="300">
<Items>
<ext:TextField ID="Username" runat="server" FieldLabel="Label" AllowBlank="true"
AnchorHorizontal="100%" Text='' AutoFocus="true" AutoFocusDelay="100" MaxLength="50"
TabIndex="1" EnableKeyEvents="true" IDMode="Explicit" AutoDataBind="true">
</ext:TextField>
<ext:TextField ID="Password" runat="server" InputType="Password" FieldLabel="Label"
AllowBlank="true" AnchorHorizontal="100%" MaxLength="128" TabIndex="2" EnableKeyEvents="true"
IDMode="Explicit" AutoDataBind="true">
</ext:TextField>
<ext:LinkButton ID="ForgotPassword" runat="server" Text="text" AnchorHorizontal="100%"
TabIndex="3" AutoDataBind="true" Disabled="false">
</ext:LinkButton>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="btnLogin" runat="server" TabIndex="4" Text="text" Disabled="true">
</ext:Button>
</Buttons>
<Listeners>
<Added Handler="this.ownerCt.on('afterrender', this.show, this, {single:true});" />
</Listeners>
</ext:Window>
</Items>
</ext:Viewport>

RCM
Mar 08, 2012, 3:29 PM
Vladimir, solution works fine for me. I am able to add a resize event that recenters the window

using the following listerner on the viewport


<Listeners>
<Resize Handler="try{this.doLayout();windowLogin.center();}catch(ex ){}"></Resize>
</Listeners>



Including the Window inside the <Items> Collection of another Container should not work. I'm actually surprised we're not throwing an Exception under this scenario. It's something we'll look at including before the final v2 release.

Please move your Window Component outside of the <Items> Collection.
So geoffrey.mcgill will this break when V2 is released.

if it will please provide me with a solution that can enable be achieve the same result. its works well for now.

Daniil
Mar 13, 2012, 6:08 PM
Hi,

No, it should not break. Now, it's possible to add an <ext:Window> into Items.

We will add a respective example in Examples Explorer soon.