Aug 15, 2019, 5:36 PM
[FIXED] [#1648] TabCloseMenu plugin - issue with icons and events
Hello support team,
please take a look at the following tab panel:
1. While CloseTabText works as expected, the CloseTabIcon setting does nothing.
2. I tried to solve this in BeforeTabMenuShow.Handler, but the event does not fire.
3. Then I tried to solve it by override:
4. Finally, I'm quite confused about triggering events. To validate applications within our framework, we listen to the
I also expected the
5.
Versions: Ext JS 6.5.1.345 / Ext.NET 4.4.1
Thank you for your assistance.
Kind regards
Dan
please take a look at the following tab panel:
@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "Tab Close Menu";
Layout = null;
var X = Html.X();
Ext.Net.MVC.MvcResourceManager.RegisterGlobalIcon(Icon.TabDelete);
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
</head>
<body>
@(X.ResourceManager())
@X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)
@(X.TabPanel()
.Height(100)
.Items(
X.Panel()
.Title("Tab 1")
.Closable(true)
.Listeners(l =>
{
l.BeforeClose.Handler = "console.log('BEFORE_TAB_CLOSE_1', arguments)";
l.BeforeRemove.Handler = "console.log('BEFORE_TAB_REMOVE_1', arguments)";
}),
X.Panel()
.Title("Tab 2")
.Closable(true)
.Listeners(l =>
{
l.BeforeClose.Handler = "console.log('BEFORE_TAB_CLOSE_2', arguments)";
l.BeforeRemove.Handler = "console.log('BEFORE_TAB_REMOVE_2', arguments)";
}),
X.Panel()
.Title("Tab 3")
.Closable(true)
.Listeners(l =>
{
l.BeforeClose.Handler = "console.log('BEFORE_TAB_CLOSE_3', arguments)";
l.BeforeRemove.Handler = "console.log('BEFORE_TAB_REMOVE_3', arguments)";
})
)
.Listeners(l => {
l.BeforeTabMenuShow.Handler = "console.log('BEFORE_TABMENU', arguments)";
l.BeforeTabClose.Handler = "console.log('BEFORE_CLOSE', arguments)";
l.BeforeRemove.Handler = "console.log('BEFORE_REMOVE', arguments)";
})
.Plugins(new TabCloseMenu()
{
CloseTabText = "CLOSE",
CloseTabIcon = Icon.TabDelete,
CloseOthersTabsText = "CLOSE OTHER",
CloseAllTabsText = "CLOSE ALL"
})
)
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
});
</script>
I'm faced to following issues:1. While CloseTabText works as expected, the CloseTabIcon setting does nothing.
2. I tried to solve this in BeforeTabMenuShow.Handler, but the event does not fire.
3. Then I tried to solve it by override:
Ext.define("Nelis.TabCloseMenu", {
override: "Ext.ux.TabCloseMenu",
onContextMenu: function (event, target) {
this.callParent(arguments);
this.menu.child("#close").setIconCls("icon-tabdelete");
}
});
... but it also does not work.4. Finally, I'm quite confused about triggering events. To validate applications within our framework, we listen to the
Close
event that is fired by clicking the Close button on the tab. However, the TabCloseMenu plugin uses the Remove
method, which does not trigger the Close event, so I was forced to override all menu handlers and use the close()
method instead of remove()
. Does the use of remove have any special reason?I also expected the
BeforeTabClose
event to be triggered on TabPanel, but it doesn't bother me that much.5.
CloseOthersTabsText
should be CloseOtherTabsText
.Versions: Ext JS 6.5.1.345 / Ext.NET 4.4.1
Thank you for your assistance.
Kind regards
Dan
Last edited by fabricio.murta; Aug 15, 2019 at 11:50 PM.