What's New?

[CLOSED] Issue with modal window (all browsers)

  1. #1
    Jun 19, 2013, 9:23 PM

    [CLOSED] Issue with modal window (all browsers)

    Hi:

    This one occurs in all browsers and it's pretty bad.

    If you open the window by clicking the Open Window button, it pushes the content of the FormPanel outside the view.

    Am I doing something wrong?

    I tested it with the latest version of 2.2 from the Trunk.

    Thanks


    TestModelWindowChildPage.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindowChildPage.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World.TestModelWindowChildPage" %>

<!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 runat="server">
    <title></title>
  </head>
  <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="form1" runat="server">
      <div>
        <ext:Viewport runat="server" Layout="fit">
          <Items>
            <ext:FormPanel ID="FormPanel1" runat="server">
              <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                  <Items>
                    <ext:Button ID="Button1" runat="server" Text="Open window">
                        <Listeners>
                          <Click Handler="#{modalWindow}.show();"></Click>
                        </Listeners>
                    </ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>
              <Items>
                <ext:TextField runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField1" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField2" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField3" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField4" runat="server" Label="Field1"></ext:TextField>
              </Items>
            </ext:FormPanel>
          </Items>
        </ext:Viewport>
        <ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Modal="true" Closable="True" CloseAction="Hide" Hidden="true">
          <Items>
            <ext:Panel ID="Panel2" runat="server" Title="Some content" Layout="border">
              <TopBar>
                <ext:Toolbar ID="Toolbar2" runat="server">
                  <Items>
                    <ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
                    <ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
                    <ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
                    <ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>                                
<%--              <Items>--%>
<%--                <ext:FormPanel runat="server" Region="Center" >--%>
<%--                  <Items>--%>
<%--                   <ext:TextArea runat="server" HideLabel="True"  Height="80"></ext:TextArea> --%>
<%--                   <ext:TextArea ID="TextArea1" runat="server" HideLabel="True" Height="50"></ext:TextArea> --%>
<%--                  </Items>--%>
<%--                </ext:FormPanel>--%>
<%--                <ext:Panel runat="server" Region="South" Height="250" Title="South Panel"></ext:Panel>--%>
<%--              </Items>--%>
            </ext:Panel>
          </Items>
        </ext:Window>
      </div>
    </form>
  </body>
</html>
    TestModelWindow.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindow.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World.TestModalWindow" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <div>
      <ext:Viewport runat="server" Layout="fit">
        <Items>
          <ext:TabPanel runat="server">
            <Items>
              <ext:Panel runat="server" Title="SomeTab" Layout="fit">
                <Loader Url="TestModalWindowChildPage.aspx" Mode="Frame" >
                  <LoadMask ShowMask="True"/>
                </Loader>
              </ext:Panel>
            </Items>
          </ext:TabPanel>
        </Items>
      </ext:Viewport>
    </div>
    </form>
</body>
</html>
    Last edited by Daniil; Jun 20, 2013 at 10:37 AM. Reason: [CLOSED]
  2. #2
    Jun 19, 2013, 10:07 PM
    After more testing it seems that if the window is created dynamically, it works properly:

    I wonder if it would work if the window was created using a PartialViewResult. It should...

    TestModalWindowChildPage.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindowChildPage.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World.TestModelWindowChildPage" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript">

      function showWindow() { // #1
        
        var tpl = Ext.create('Ext.Template', [ // #1
        'Hello {firstName} {lastName}!',
        ' Nice to meet you!'
        ]);
        var formPanel = Ext.create('Ext.form.FormPanel', { // #2
              itemId : 'formPanel',
              frame : true,
              layout: 'anchor',              
              defaultType : 'textfield',
              defaults : {
              anchor : '-10',
              labelWidth : 65
            },
            tbar: { xtype: 'toolbar', items: [{ xtype: 'button', text: 'Button 1' }, { xtype: 'button', text: 'Button 2'}] },
            items : [ // #3
            {
              fieldLabel : 'First name',
              name : 'firstName'
            },
            {
              fieldLabel : 'Last name',
              name : 'lastName'
            },
            {
              fielLabel: '',
              xtype: 'textarea',
              anchor: '100% -10'
            }
            ],
            buttons : [
              {
                text : 'Submit', //
                handler : function() {
                  var fp = this.up('#formPanel'),
                  vals = fp.getValues(),
                  greeting = tpl.apply(vals);
                  Ext.Msg.alert('Hello!', greeting); //
 
                }
              }
            ]
            });

        Ext.create('Ext.window.Window', { // #2
          height: 500,
          width: 200,
          closable: true,
          title: 'Input needed.',
          border: false,
          layout: 'fit',
          modal: true,
          items: formPanel // #3
        }).show();
      }
      
    </script>
  </head>
  <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="form1" runat="server">
      <div>
        <ext:Viewport runat="server" Layout="fit">
          <Items>
            <ext:FormPanel ID="FormPanel1" runat="server">
              <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                  <Items>
                    <ext:Button ID="Button1" runat="server" Text="Open window">
                        <Listeners>
                          <Click Handler="showWindow();"></Click>
                        </Listeners>
                    </ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>
              <Items>
                <ext:TextField runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField1" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField2" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField3" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField4" runat="server" Label="Field1"></ext:TextField>
              </Items>
            </ext:FormPanel>
          </Items>
        </ext:Viewport>
        <ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Modal="true" Closable="True" CloseAction="Hide" Hidden="true">
          <Items>
            <ext:Panel ID="Panel2" runat="server" Title="Some content" Layout="border" >
              <TopBar>
                <ext:Toolbar ID="Toolbar2" runat="server">
                  <Items>
                    <ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
                    <ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
                    <ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
                    <ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>                                
              <Items>
                <ext:FormPanel runat="server" Region="Center" >
                  <Items>
                   <ext:TextArea runat="server" HideLabel="True"  Height="80"></ext:TextArea> 
                   <ext:TextArea ID="TextArea1" runat="server" HideLabel="True" Height="50"></ext:TextArea> 
                  </Items>
                </ext:FormPanel>
                <ext:Panel runat="server" Region="South" Height="250" Title="South Panel"></ext:Panel>
              </Items>
            </ext:Panel>
          </Items>
        </ext:Window>
      </div>
    </form>
  </body>
</html>
  3. #3
    Jun 20, 2013, 12:37 AM
    Hello!

    Please, remove border layout of Panel2:

    <ext:Panel ID="Panel2" runat="server" Title="Some content">
    Please, read the following page: http://docs.sencha.com/extjs/4.2.1/#...ntainer.Border

    Any Container using the Border layout must have a child item with region:'center'.
  4. #4
    Jun 20, 2013, 1:05 AM
    Yes, sorry, I tried a lot of permutations and I forgot to uncomment the items of panel2.

    Try this, it basically screws up the window.

    TestModalWindowChildPage.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindowChildPage.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World.TestModelWindowChildPage" %>

<!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 runat="server">
    <title></title>
   
  </head>
  <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="form1" runat="server">
      <div>
        <ext:Viewport runat="server" Layout="fit">
          <Items>
            <ext:FormPanel ID="FormPanel1" runat="server">
              <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                  <Items>
                    <ext:Button ID="Button1" runat="server" Text="Open window">
                        <Listeners>
                          <Click Handler="#{modalWindow}.show(); /* showWindow();*/"></Click>
                        </Listeners>
                    </ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>
              <Items>
                <ext:TextField runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField1" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField2" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField3" runat="server" Label="Field1"></ext:TextField>
                <ext:TextField ID="TextField4" runat="server" Label="Field1"></ext:TextField>
              </Items>
            </ext:FormPanel>
          </Items>
        </ext:Viewport>
        <ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Closable="True" CloseAction="Hide" Hidden="true" Modal="True">

          <Items>
            <ext:Panel ID="Panel2" runat="server" Title="Some content" Layout="border"  >
              <TopBar>
                <ext:Toolbar ID="Toolbar2" runat="server">
                  <Items>
                    <ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
                    <ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
                    <ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
                    <ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
                  </Items>
                </ext:Toolbar>
              </TopBar>                                
              <Items>
                <ext:FormPanel runat="server" Region="Center" >
                  <Items>
                   <ext:TextArea runat="server" HideLabel="True"  Height="80"></ext:TextArea> 
                   <ext:TextArea ID="TextArea1" runat="server" HideLabel="True" Height="50"></ext:TextArea> 
                  </Items>
                </ext:FormPanel>
                <ext:Panel runat="server" Region="South" Height="250" Title="South Panel"></ext:Panel>
              </Items>
            </ext:Panel>
          </Items>
        </ext:Window>
      </div>
    </form>
  </body>
</html>
  5. #5
    Jun 20, 2013, 1:43 AM
    Try to set FitLayout for the Window:

    <ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Closable="True" CloseAction="Hide" Hidden="true" Modal="True" Layout="Fit">
    <Items>
    <ext:Panel ID="Panel2" runat="server" Title="Some content" Layout="Border" Hidden="False">
        <TopBar>
        <ext:Toolbar ID="Toolbar2" runat="server">
            <Items>
            <ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
            <ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
            <ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
            <ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
            </Items>
        </ext:Toolbar>
        </TopBar>                                
        <Items>
        <ext:FormPanel runat="server" Region="Center" >
            <Items>
            <ext:TextArea runat="server" HideLabel="True"  Height="80"></ext:TextArea> 
            <ext:TextArea ID="TextArea1" runat="server" HideLabel="True" Height="50"></ext:TextArea> 
            </Items>
        </ext:FormPanel>
        </Items>
    </ext:Panel>
    </Items>
</ext:Window>
  6. #6
    Jun 20, 2013, 2:18 AM
    Yes, it works fine when I set the fit layout. You can close the thread.

    Thank you!

Similar Threads

  1. [CLOSED] IE9 Issue with modal window
    By bogc in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 20, 2013, 2:20 AM
  2. [CLOSED] Strange Issue with modal window in IE
    By CarWise in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 16, 2012, 10:47 AM
  3. Modal Window Open another Modal Window and Data return
    By nuno_Santos in forum 1.x Help
    Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  4. [CLOSED] Issue with drag and drop for portal in modal window
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 09, 2011, 9:13 AM
  5. [CLOSED] Modal Window Issue
    By SamFoot in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 27, 2011, 9:37 AM

Posting Permissions