Main.cshtml
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Main</title>
<script type="text/javascript">
function drawSnapshots() {
for (var i = 0; i < snapshotIDs.length; i++) {
var pid = "panel" + i;
var panel = Ext.create('Ext.panel.Panel', {
title: snapshotTitles[i],
id: pid,
height: 500,
flex: 1,
layout: 'fit',
loader: {
url: '@(Url.Action("Loader"))',
renderer: "frame",
mode: 'frame',
loadMask: { showMask: true },
params: { snapshotindex: i , sfields:fields[i] ,scol:colnames[i],filterf:FilterType[i],vs:visiblefields[i],filtervs:filterofVisible[i]},
autoload: true,
}
});
App.MainTab.add(panel);
}
}
function TabChanged()
{
App.MainTab.disable();
}
</script>
</head>
<body>
@(Html.X().ResourceManager()
.Listeners(li =>
{
li.DocumentReady.Handler = "drawSnapshots()";
})
)
@(Html.X().TabPanel()
.ID("MainTab")
.RenderTo("Ext.getBody()")
.Border(false)
.Plugins(Html.X().TabScrollerMenu().PageSize(10))
.Title("Tasks")
.TitleAlign(Ext.Net.TitleAlign.Right)
.TabAlign(Ext.Net.TabAlign.Right)
.Listeners(li => { li.TabChange.Handler = "TabChanged()"; })
)
</body>
</html>
in the child page which is the loader of each panel in the tab: Grid.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Grid</title>
<script>
function enableMainTab()
{
parent.App.MainTab.enable(); // Here is the problem when the MainTab is enabled its items (panels) are dimmed.
}
</script>
</head>
<body>
@(Html.X().ResourceManager().Listeners(li => { li.DocumentReady.Handler = "enableMainTab()"; }))
</body>
</html>
this case only using MVC
