PDA

View Full Version : [CLOSED] Notification with Items



UnifyEducation
Apr 23, 2013, 8:38 AM
Hi,

I use Notification with Items. The code is the same as your examples: http://examples2.ext.net/Examples/MessageBox/Notification/Overview/


Notification.Show(new NotificationConfig
{
Title = "Items",
Height = 200,
Width = 200,
HideDelay = 7000,
Layout = LayoutType.Border.ToString(),
ShowPin = true,
Items =
{
new Ext.Net.Panel
{
Region = Region.West,
Collapsible = true,
Title = "West",
Width = 100,
Icon = Icon.Add
},

new Ext.Net.Panel
{
Title = "Center",
Region = Region.Center,
Icon = Icon.PageWhiteEdit
}
},
DockedItems =
{
new Toolbar
{
Dock = Dock.Bottom,
Items =
{
new TextField
{
Flex = 1,
EmptyText = "Focus to pin",
Listeners =
{
Focus =
{
Handler = "this.up('window').pin();"
}
}
},
new Ext.Net.Button { Icon = Icon.Magnifier }
}
}
}
});

But I get an error:

Uncaught TypeError: Cannot read property 'defaultView' of undefined
It may be come from NotificationConfig.Items.
Can you tell me how to correct it. I use Ext.Net 2.2
Thanks

Daniil
Apr 23, 2013, 10:09 AM
Hi @UnifyEducation,

Thank you for the report. We are investigating.

Daniil
Apr 24, 2013, 8:28 AM
It has been fixed in SVN. Thank you again for the report!

UnifyEducation
May 07, 2013, 8:19 AM
Hi, I have just updated svn today.
And the problem returns with another error:

Uncaught TypeError: Cannot call method 'enableShadow' of undefined

Daniil
May 07, 2013, 9:37 AM
I can't reproduce it in FireFox. Does it depend on a browser?


I have just updated svn today.

From the trunk?
http://svn.ext.net/premium/trunk

UnifyEducation
May 07, 2013, 3:53 PM
I can't reproduce it in FireFox. Does it depend on a browser?



From the trunk?
http://svn.ext.net/premium/trunk

Hi, I update from the trunk (at revision: 5115) and test with Chrome, Firefox6174

Vladimir
May 07, 2013, 7:04 PM
Please post a sample reproduces the issue

Daniil
May 08, 2013, 3:36 AM
Hi, I update from the trunk (at revision: 5115) and test with Chrome, Firefox6174

I can't reproduce it in Chrome, FireFox and IE9 using the Ext.NET sources from the trunk and the test case from the initial post.

cwolcott
May 11, 2013, 2:15 AM
Agreed I had an issue with this in Release 2.2 (Rev 5107), but everything seems to fine with the trunk (Rev 5129). The fix was applied to the trunk with Rev 5082 on Apr 24.

Question: - I have always used the trunk during our development phase, but as our release date is approaching I was considering sticking with Rel 2.2. But I can't live without this fix. Will any patches be applied to 2.2 or is it held at Rev 5107?

UnifyEducation
May 13, 2013, 8:40 AM
Hi,

The problem comes when I add "CloseVisible = true" into NotificationConfig. Here is my test (on revision 5129):

Views:

@model dynamic

@{
Layout = null;
}
<div style="text-align: center;">
@Html.X().ResourceManager()
@Html.X().Button().Text("Show Notification").ID("MyGrid").DirectClickUrl(Url.Action("ShowNotification"))
</div>


Controllers:


public class TestController : Controller
{
public ActionResult Index()
{
return View();
}

public DirectResult ShowNotification()
{
string scipt = Notification.Show(new NotificationConfig
{
Title = "Title",
ID = "ProgramBrowser",
Height = 200,
Width = 300,
Modal = true,
CloseVisible = true,
Layout = LayoutType.Fit.ToString(),
AlignCfg = new NotificationAlignConfig
{
ElementAnchor = AnchorPoint.TopRight,
TargetAnchor = AnchorPoint.TopLeft,
OffsetX = 2,
OffsetY = 0,
El = "MyGrid"
},
ShowFx = new SlideIn { Anchor = AnchorPoint.Right },
HideFx = new SlideOut { Anchor = AnchorPoint.Right },
Items =
{
new FormPanel { Border = false, Title = "OK"}
},
}).ToScript();
return new DirectResult(scipt);
}
}

Daniil
May 13, 2013, 10:52 AM
Hi,

The problem comes when I add "CloseVisible = true" into NotificationConfig. Here is my test (on revision 5129):

Views:

@model dynamic

@{
Layout = null;
}
<div style="text-align: center;">
@Html.X().ResourceManager()
@Html.X().Button().Text("Show Notification").ID("MyGrid").DirectClickUrl(Url.Action("ShowNotification"))
</div>


Controllers:


public class TestController : Controller
{
public ActionResult Index()
{
return View();
}

public DirectResult ShowNotification()
{
string scipt = Notification.Show(new NotificationConfig
{
Title = "Title",
ID = "ProgramBrowser",
Height = 200,
Width = 300,
Modal = true,
CloseVisible = true,
Layout = LayoutType.Fit.ToString(),
AlignCfg = new NotificationAlignConfig
{
ElementAnchor = AnchorPoint.TopRight,
TargetAnchor = AnchorPoint.TopLeft,
OffsetX = 2,
OffsetY = 0,
El = "MyGrid"
},
ShowFx = new SlideIn { Anchor = AnchorPoint.Right },
HideFx = new SlideOut { Anchor = AnchorPoint.Right },
Items =
{
new FormPanel { Border = false, Title = "OK"}
},
}).ToScript();
return new DirectResult(scipt);
}
}

I can't reproduce it in FireFox. Does it depend on browser?

I had to replace

El = "MyGrid"
with some <div> element.

Daniil
May 13, 2013, 11:03 AM
Agreed I had an issue with this in Release 2.2 (Rev 5107), but everything seems to fine with the trunk (Rev 5129). The fix was applied to the trunk with Rev 5082 on Apr 24.

Question: - I have always used the trunk during our development phase, but as our release date is approaching I was considering sticking with Rel 2.2. But I can't live without this fix. Will any patches be applied to 2.2 or is it held at Rev 5107?

Unfortunately, we can't add anything to v2.2 release.

There is the 2.2 branch, but the statement regarding this branch is:
http://forums.ext.net/showthread.php?24229#post108159

Anyway, you can apply the fix locally in your application. You should put it into a page's <head>.

Fix

Ext.net.Notification = function () {
Ext.MessageBox.notify = function (title, msg) {
if (Ext.isString(title)) {
Ext.net.Notification.show({
title: title,
html: msg || ""
});
} else {
Ext.net.Notification.show(title);
}
};

var notifications = [];

return {
getDefaultOffset : function () {
var defaultOffset = [-10, -10];

if(!Ext.isIE9m) {
if(Ext.getBody().getHeight() >= Ext.Element.getViewportHeight())
{
defaultOffset[0] = -10 - Ext.getScrollbarSize().width;
}

if(Ext.getBody().getWidth() > Ext.Element.getViewportWidth())
{
defaultOffset[1] = -10 - Ext.getScrollbarSize().height;
}
}

return defaultOffset;
},

show : function (config) {
if (config && (config.items || config.dockedItems))
{
var resources = [];

if (config.items && config.items['x.res']) {
if (config.items['x.res'].ns) {
Ext.ns.apply(Ext, config.items['x.res'].ns);
}

if (config.items['x.res'].res) {
resources = config.items['x.res'].res;
}

config.items = config.items.config;
}

if (config.dockedItems && config.dockedItems['x.res']) {
if (config.dockedItems['x.res'].ns) {
Ext.ns.apply(Ext, config.dockedItems['x.res'].ns);
}

if (config.dockedItems['x.res'].res) {
resources = Ext.Array.push(resources, config.dockedItems['x.res'].res);
}
config.dockedItems = config.dockedItems.config;
}

if (resources.length > 0)
{
Ext.net.ResourceMgr.load(resources, Ext.Function.bind(this.show, this, [config]));
return;
}
else {
if (Ext.isString(config.items)) {
config.items = Ext.decode(config.items);
}

if (Ext.isString(config.dockedItems)) {
config.dockedItems = Ext.decode(config.dockedItems);
}
}
}

config = config || {};
var removeHeight = (Ext.isDefined(config.height) && !config.height) || (config.bodyStyle && config.bodyStyle.match(/height\s*:\s*auto/g));

config = Ext.applyIf(config, {
width : 200,
height : 100,
autoHide : true,
plain : false,
resizable : false,
draggable : false,
alignToCfg : {
el : document,
position : "br-br",
offset : this.getDefaultOffset()
},
showMode : "grid", /* "grid|stack" */
closeVisible : false,
bringToFront : false,
pinEvent : "none",
hideDelay : 2500,
shadow : false,
showPin : false,
pinned : false,
showFx : {
fxName : "slideIn",
args : ["b", {}]
},
hideFx : {
fxName : "slideOut",
args : ["b", {}]
},

/*functions*/
focus : Ext.emptyFn,

stopHiding : function () {
this.tools.close.show();
this.pinned = true;

if (this.autoHide) {
this.hideTask.cancel();
}
},

isStandardAlign : function () {
return this.alignToCfg.el == document && this.alignToCfg.position == "br-br";
},

getStatndardAlign : function () {
var w = [];

for (var i = 0; i < notifications.length; i++) {
var window = notifications[i];

if (window.isStandardAlign()) {
w.push(window);
}
}

return w;
},

getOffset : function () {
var offset = [], predefinedOffset = this.alignToCfg.offset || this.getDefaultOffset();
//need clone
offset.push(predefinedOffset[0]);
offset.push(predefinedOffset[1]);

if (this.showMode == "grid" && this.isStandardAlign()) {
var saw = this.getStatndardAlign(),
height = this.getSize().height - offset[1],
width = this.getSize().width - offset[0],
yPos = Ext.fly(this.alignToCfg.el).getViewSize().height - height,
xPos = Ext.fly(this.alignToCfg.el).getViewSize().width - width,
found = false,
isIntersect = function (tBox, box) {
tBox.x2 = tBox.x + tBox.width;
tBox.y2 = tBox.y + tBox.height;

box.x2 = box.x + box.width;
box.y2 = box.y + box.height;

if ((tBox.x2 - box.x) <= 0 || (box.x2 - tBox.x) <= 0) {
return false;
}

if ((tBox.y2 - box.y) <= 0 || (box.y2 - tBox.y) <= 0) {
return false;
}

return true;
};

while (xPos >= 0 && !found) {
while (yPos >= 0 && !found) {
var intersect = false;

for (var i = 0; i < saw.length; i++) {
var window = saw[i],
box = window.getBox();

if (box.width == 0 && box.height == 0) {
box = window._defaultBox;
}

if (isIntersect({ x: xPos, y: yPos, width: width, height: height }, box)) {
intersect = true;
break;
}
}

found = !intersect;

if (!found) {
yPos -= height;
}
}

if (!found) {
yPos = Ext.fly(this.alignToCfg.el).getViewSize().height - height;
xPos -= width;
}
}

if (found) {
this._defaultBox = { x: xPos, y: yPos, width: width, height: height };
offset[0] = offset[0] + ((xPos + width) - Ext.fly(this.alignToCfg.el).getViewSize().width);
offset[1] = offset[1] + ((yPos + height) - Ext.fly(this.alignToCfg.el).getViewSize().height);
}
}

return offset;
},
onShow : Ext.emptyFn,
beforeShow : function () {
var offset = this.getOffset();
notifications.push(this);
this._showing = true;
this.alignOffset = offset;

this.el.alignTo(this.alignToCfg.el || document, this.alignToCfg.position || "br-br", offset);
this.el.setDisplayed(false);
if (Ext.isArray(this.showFx.args) && this.showFx.args.length > 0) {
this.showFx.args[this.showFx.args.length - 1] = Ext.apply(this.showFx.args[this.showFx.args.length - 1], { listeners: {beforeanimate: this.beforeAnimate, afteranimate : this._afterShow, scope: this }});
} else {
this.showFx.args = [{ listeners: {beforeanimate: this.beforeAnimate,afteranimate : this._afterShow, scope: this }}];
}
this.el[this.showFx.fxName].apply(this.el, this.showFx.args);
},
beforeAnimate : function () {
this.el.setDisplayed(true);
},

_afterShow : function () {
this._showing = false;

if (this._closed) {
this.destroy();
}

this.toFront();

if (this.shadow) {
this.el.enableShadow(true);
this.syncShadow();
}

this.fireEvent('show', this);
},

onHide : function () {
if (this._closed) {
return;
}

if (Ext.isArray(this.hideFx.args) && this.hideFx.args.length > 0) {
this.hideFx.args[this.hideFx.args.length - 1] = Ext.apply(this.hideFx.args[this.hideFx.args.length - 1], { listeners: {afteranimate :this._hide, scope: this }});
} else {
this.hideFx.args = [{ listeners: {afteranimate : this._hide, scope: this }}];
}

this.el[this.hideFx.fxName].apply(this.el, this.hideFx.args);
},
_hide : function () {
this.hidden = true;
this.el.hide();
this.afterHide();
this.fireEvent('close', this);
this.destroy();
}
});

if (removeHeight) {
delete config.height;
}

config.cls = config.cls || "";
config.cls += " x-notification";

if (config.closeVisible) {
for (var i = notifications.length - 1; i >= 0; i--) {
notifications[i]._closed = true;

if (!notifications[i]._showing) {
notifications[i].destroy();
}
}

notifications = [];
}

var w = new Ext.window.Window(config),
mOver = function (e, t) {
if (!this.pinned) {
this.hideTask.cancel();
this.delayed = true;
}
},
mOut = function (e, t) {
if (!this.pinned) {
this.hideTask.delay(this.hideDelay);
this.delayed = false;
}
};

w.on("render", function () {
if (this.autoHide) {
this.el.on("mouseover", mOver, this);
this.el.on("mouseout", mOut, this);

if (this.header) {
this.tools.close.hide();
}
}

if (this.contentEl) {
Ext.fly(this.contentEl).removeCls("x-hide-offsets");
}
}, w);

w.afterRender = Ext.Function.createSequence(w.afterRender, function () {
if (this.showPin) {
this.pin = function (e, toolEl , owner, tool) {
this.tools.unpin.hide();
this.tools.pin.show();
this.hideTask.cancel();
this.pinned = true;
};

this.unpin = function (e, toolEl , owner, tool) {
this.tools.pin.hide();
this.tools.unpin.show();
this.hide();
this.pinned = false;
};

this.addTool({
type: "unpin",
itemId : "unpin",
handler: this.pin,
hidden: this.pinned,
hideMode : "display",
scope: this
});

this.addTool({
type: "pin",
itemId : "pin",
handler: this.unpin,
hidden: !this.pinned,
hideMode : "display",
scope: this
});
}
});

w.toFront = function (e) {
var aw = Ext.WindowMgr.getActive();

Ext.WindowMgr.bringToFront(this);

if (!Ext.isEmpty(aw) && aw !== this && !this.bringToFront && aw.manager) {
aw.manager.bringToFront(aw);
aw.manager.bringToFront.defer(10, aw.manager, [aw]);
}

return this;
};

w.focus = Ext.emptyFn;

w.afterShow = Ext.Function.createSequence(w.afterShow, function () {
if (this.pinEvent !== "none") {
this.el.on(this.pinEvent, this.stopHiding, this);
this.on(this.pinEvent, this.stopHiding, this);
}

if (this.autoHide && !this.delayed && !this.pinned) {
this.hideTask.delay(this.hideDelay);
}
});

w.on("beforedestroy", function () {
for (var i = 0; i < notifications.length; i++) {
if (notifications[i].id == this.id) {
notifications.splice(i, 1);
break;
}
}

if (this.contentEl) {
var ce = Ext.get(this.contentEl), el = Ext.net.ResourceMgr.getAspForm() || Ext.getBody();

ce.addCls("x-hidden");
el = el.dom;
el.appendChild(ce.dom);
}

if (this.initialConfig.id) {
window[this.initialConfig.id] = undefined;
}
}, w);

if (config.autoHide) {
w.hideTask = new Ext.util.DelayedTask(w.hide, w);
}

w.on("beforehide", function () {
this.el.disableShadow();
}, w);

w.show();

return w;
}
};
}();

By the way, the thread which I referred to covers some HTTPS/SSL issue (you can investigate the thread if you need the details). This issue appears with the v2.2 release and with the SVN trunk, but fixed in the 2.2 branch. So, you might want to consider using the 2.2 branch for your release, but please note that it uses ExtJS 4.2.1 beta release.

UnifyEducation
May 13, 2013, 12:31 PM
I can't reproduce it in FireFox. Does it depend on browser?

I had to replace

El = "MyGrid"
with some <div> element.

Hi, I test in Firefox 20.0.1. And "MyGrid" is just an id of the button that call ShowNotification action.

@Html.X().Button().Text("Show Notification").ID("MyGrid").DirectClickUrl(Url.Action("ShowNotification"))
The error raises only if I add "CloseVisible = true," in NotificationConfig,
If I use CloseVisible = false, all works fine.

Daniil
May 13, 2013, 3:03 PM
I was able to reproduce.

Returning a DirectResult with a script makes the second notification.

Just a Notification.Show() call is enough. Please correct the action according this example.

Example

public DirectResult ShowNotification()
{
Notification.Show(new NotificationConfig
{
Title = "Title",
ID = "ProgramBrowser",
Height = 200,
Width = 300,
Modal = true,
CloseVisible = true,
Layout = LayoutType.Fit.ToString(),
AlignCfg = new NotificationAlignConfig
{
ElementAnchor = AnchorPoint.TopRight,
TargetAnchor = AnchorPoint.TopLeft,
OffsetX = 2,
OffsetY = 0,
El = "MyGrid"
},
ShowFx = new SlideIn { Anchor = AnchorPoint.Right },
HideFx = new SlideOut { Anchor = AnchorPoint.Right },
Items =
{
new FormPanel { Border = false, Title = "OK"}
}
});
return new DirectResult();
}