PDA

View Full Version : [CLOSED] Content Resizing with Notification Window



cleve
Feb 23, 2013, 11:33 AM
Hi guys,

Here's my code. My question goes with the content resizing within notification window.




<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="theHead"></head>
<body id="theBody">

<ext:ResourceManager ID="theManager" runat="server"
ShowWarningOnAjaxFailure="false"
DirectMethodProxy="Ignore"
ScriptMode="Debug" />


<ext:Button runat="server" Icon="Application" Text="-----">
<Listeners>
<Click Handler="testFunc(#{pan});" />
</Listeners>
</ext:Button>
<asp:Panel runat="server" CssClass="x-hide-offsets">
<ext:Panel runat="server" ID="pan" />
</asp:Panel>


<script type="text/javascript">


var testFunc = function (p) {


var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
contentEl: <%= pan.ClientID %>.getEl()
});


window.alert(win.body.getWidth());
window.alert(win.body.getHeight());


p.setWidth(win.body.getWidth() - 8);
p.setHeight(win.body.getHeight() - 8);
}


</script>


</body>
</html>
<script runat="server">

protected override void OnInit(EventArgs e)
{
}


</script>





It looks like:
1. Notification.show doesn't have parameter set to layout the content inside. e.g., I can't specify layout:"fit" in confi
2. Then, when using content inside notification, I might need to do resizing base on win.body's width and height
3. However, notification window's width and height is not valid until animating process has been finished. Prior of that, the named width and height return 0, just as the code shows.

Can I:
1. Know how to do fit layout inside notification window?
2. Or, if it's not applicable, what event handler can I apply to know exactly when the animating process's finished and width and height are available?

Baidaly
Feb 24, 2013, 12:51 PM
Hello!


Hi guys,

It looks like:
1. Notification.show doesn't have parameter set to layout the content inside. e.g., I can't specify layout:"fit" in confi
2. Then, when using content inside notification, I might need to do resizing base on win.body's width and height
3. However, notification window's width and height is not valid until animating process has been finished. Prior of that, the named width and height return 0, just as the code shows.

Can I:
1. Know how to do fit layout inside notification window?
2. Or, if it's not applicable, what event handler can I apply to know exactly when the animating process's finished and width and height are available?

1. You can use config.layout:



var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
items: [{
title: 'test1'
}],
layout: 'fit'
});


2. You should listen show event:


var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
contentEl: <%= pan.ClientID %>.getEl(),
listeners: {
show: {
fn: function() {
Ext.Msg.alert('width', this.width);
}
}
}
});

cleve
Feb 24, 2013, 10:04 PM
Sorry, it doesn't work.




<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="theHead"></head>
<body id="theBody">

<ext:ResourceManager ID="theManager" runat="server"
ShowWarningOnAjaxFailure="false"
DirectMethodProxy="Ignore"
ScriptMode="Debug" />


<ext:Button runat="server" Icon="Application" Text="-----">
<Listeners>
<Click Handler="testFunc(#{pan});" />
</Listeners>
</ext:Button>
<asp:Panel ID="panWrap" runat="server" CssClass="x-hide-offsets">
<ext:Panel runat="server" ID="pan">
<Items>
<ext:TextField runat="server" />
</Items>
</ext:Panel>
</asp:Panel>


<script type="text/javascript">


var testFunc = function (p) {

var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
layout: "fit",
contentEl: "<%= panWrap.ClientID %>",
listeners: {
show: {
fn: function () {
window.alert("show");
}
}
}
});

//window.alert(win.body.getWidth());
//window.alert(win.body.getHeight());
//p.setWidth(win.body.getWidth() - 8);
//p.setHeight(win.body.getHeight() - 8);
}


</script>


</body>
</html>
<script runat="server">

protected override void OnInit(EventArgs e)
{
}


</script>



Attached is the notification window inside which panel is not fit.

geoffrey.mcgill
Feb 24, 2013, 11:16 PM
Layouts will not apply to general html elements, which is what the <asp:Panel> is. As well, Layouts will apply to anything added via the .contentEl config. The .contentEl is basically treated as raw html.

If you want to add an Ext.NET Panel, you can use the .add() function.

The following sample demonstrates the whole senario. I also cleaned up your original sample by removing all code that was not directly related to the issue.

Example


<%@ Page Language="C#" %>

<!DOCTYPE html>


<html>
<head runat="server">
<title>Ext.NET Example</title>


<script type="text/javascript">
var doSomething = function (p) {
var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
layout: "fit",
listeners: {
show: {
fn: function () {
this.add(p.show());
}
}
}
});
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Submit">
<Listeners>
<Click Handler="doSomething(#{Panel1});" />
</Listeners>
</ext:Button>


<ext:Panel ID="Panel1" runat="server" Hidden="true">
<Items>
<ext:TextField runat="server" />
</Items>
</ext:Panel>
</body>
</html>

Hope this helps

cleve
Feb 25, 2013, 7:14 AM
Layouts will not apply to general html elements, which is what the <asp:Panel> is. As well, Layouts will apply to anything added via the .contentEl config. The .contentEl is basically treated as raw html.

If you want to add an Ext.NET Panel, you can use the .add() function.

The following sample demonstrates the whole senario. I also cleaned up your original sample by removing all code that was not directly related to the issue.

Example


<%@ Page Language="C#" %>

<!DOCTYPE html>


<html>
<head runat="server">
<title>Ext.NET Example</title>


<script type="text/javascript">
var doSomething = function (p) {
var win = X.net.Notification.show({
width: 300,
height: 300,
closeVisible: false,
autoHide: false,
layout: "fit",
listeners: {
show: {
fn: function () {
this.add(p.show());
}
}
}
});
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Submit">
<Listeners>
<Click Handler="doSomething(#{Panel1});" />
</Listeners>
</ext:Button>


<ext:Panel ID="Panel1" runat="server" Hidden="true">
<Items>
<ext:TextField runat="server" />
</Items>
</ext:Panel>
</body>
</html>

Hope this helps

It works just once. Applying second click on that button makes panel disappeared. Or even a JS error telling panel is no more.
I think keeping contentEl has its point, just as the example site demonstrates.
I've taken an alternative: to check if notification window is zero height or width, if not, apply a rescale on panel. Works fine now :) even repeatingly showing the same panel with different data binding inside.

Vladimir
Feb 25, 2013, 9:28 AM
Yes, Notification window is destroyed after hidding therefore all items also destroyed
The panel must be removed without destroyded from a notification, add this listener to notification


hide : function () {
this.remove(0, false).hide();
}

cleve
Feb 26, 2013, 4:05 AM
Done. Thanks and pls close.