PDA

View Full Version : [CLOSED] Issue with modal window (all browsers)



bogc
Jun 19, 2013, 9:23 PM
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>

bogc
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>

Baidaly
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/#!/api/Ext.layout.container.Border


Any Container using the Border layout must have a child item with region:'center'.

bogc
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>

Baidaly
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>

bogc
Jun 20, 2013, 2:18 AM
Yes, it works fine when I set the fit layout. You can close the thread.

Thank you!