PDA

View Full Version : [CLOSED] Notification auto height



RCN
Nov 30, 2012, 1:47 PM
I would like to know whether it's possible to define a Notification with auto height.

I found an 1.x example that shows this feature:
http://forums.ext.net/showthread.php?20911-CLOSED-How-to-accumulate-messages-to-display-with-one-X-Msg-Alert()

Thanks in advance

RCN
Nov 30, 2012, 3:05 PM
The following example works on version 1.x. I would like to know if the AutoHeight is absent on version 2.x or if it's a bug



<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
var notify = function () {
Ext.net.Notification.show({
iconCls: 'icon-error',
html: 'BEGIN Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net END',
title: 'Ext.Net',
autoHeight: true
});
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Notify" runat="server">
<Listeners>
<Click Handler="notify();" />
</Listeners>
</ext:Button>
</body>
</html>

Daniil
Nov 30, 2012, 3:43 PM
Hi Raphael,

The AutoHeight option has been removed on ExtJS site.

A substitution in your case is:

bodyStyle: "height: auto;"

RCN
Nov 30, 2012, 4:10 PM
Where do i have to set that configuration?

Line 6 - It does not work


var notify = function () {
Ext.net.Notification.show({
iconCls: 'icon-error',
html: 'BEGIN Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net END',
title: 'Ext.Net',
bodyStyle: "height: auto;"
});
}


Line 6 - It increases the height but not enought


var notify = function () {
Ext.net.Notification.show({
iconCls: 'icon-error',
html: 'BEGIN Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net END',
title: 'Ext.Net',
height: 'auto'
});
}

Daniil
Nov 30, 2012, 5:50 PM
Indeed. For now please set up:

height: null,
bodyStyle: "height: auto;"

RCN
Dec 01, 2012, 3:37 AM
I will test it and keep you posted

RCN
Dec 03, 2012, 4:29 PM
Thank you Daniil, it worked like a charm.

I just would like to know if the approach provided above is an workaround or a permanent way to accomplish it?

If it is a permanent, please mark this thread as closed.

RCN
Dec 03, 2012, 4:37 PM
i just would like to inform that if the header is set to false (Line 9) it's not necessary to set bodyStyle and the height can be set to auto (Line 10), as shown below:



<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<script type="text/javascript">
var notify = function () {
Ext.net.Notification.show({
iconCls: 'icon-error',
html: 'BEGIN Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net END',
header: false,
height: 'auto'
});
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<ext:Button ID="Button1" Text="Notify" runat="server">
<Listeners>
<Click Handler="notify();" />
</Listeners>
</ext:Button>
</body>
</html>

Daniil
Dec 04, 2012, 5:04 AM
Thank you Daniil, it worked like a charm.

I just would like to know if the approach provided above is an workaround or a permanent way to accomplish it?


It was a workaround. After updating form SVN you can remove "height: null". The bodyStyle option will be enough.


i just would like to inform that if the header is set to false (Line 9) it's not necessary to set bodyStyle and the height can be set to auto (Line 10), as shown below:



<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<script type="text/javascript">
var notify = function () {
Ext.net.Notification.show({
iconCls: 'icon-error',
html: 'BEGIN Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net Ext Net END',
header: false,
height: 'auto'
});
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<ext:Button ID="Button1" Text="Notify" runat="server">
<Listeners>
<Click Handler="notify();" />
</Listeners>
</ext:Button>
</body>
</html>


A good finding! But I think it is rather a trick. I would not use in production.

RCN
Dec 04, 2012, 11:17 AM
A good finding! But I think it is rather a trick. I would not use in production.

Yes, it's a trick.

Thank you Daniil