[CLOSED] Window in viewport not working

  1. #1

    [CLOSED] Window in viewport not working

    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>
    Last edited by Daniil; Mar 13, 2012 at 7:08 PM. Reason: [CLOSED]
  2. #2
    What a sense to place a window to Items collection?
    It is floating element, place it outside ViewPort
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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.
  4. #4
    Quote Originally Posted by RCM View Post
    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.
    Geoffrey McGill
    Founder & CEO
  5. #5
    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/ex...ow/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>
    Vladimir Shcheglov
    Sr. Developer
  6. #6
    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.
    Last edited by geoffrey.mcgill; Mar 08, 2012 at 6:23 PM. Reason: please use [CODE] tags
  7. #7
    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.

Similar Threads

  1. Replies: 3
    Last Post: Jun 22, 2012, 5:18 PM
  2. Re: How to open a window outside a viewport
    By hahsm in forum 1.x Help
    Replies: 2
    Last Post: Apr 17, 2011, 12:26 PM
  3. Replies: 14
    Last Post: Mar 30, 2010, 8:08 PM
  4. How to fix Window in Viewport
    By designworxz in forum 1.x Help
    Replies: 4
    Last Post: Feb 23, 2009, 6:49 PM
  5. [CLOSED] Move Window in viewport to entire page
    By speedstepmem2 in forum 1.x Premium Help
    Replies: 1
    Last Post: Dec 06, 2008, 7:48 AM

Posting Permissions