May 20, 2013, 2:20 AM
[CLOSED] Dynamically add tab
In Ext 1.x, I used this code:
I tried following this example:
Dynamic Partial Rendering
However, the tab does not get added. This is my controller:
The request/response looks correct. When debuging, the controller sends back:
Thanks.
Amit
var OpenPage = function (pageid, url, title, showmask, iconcls) {
//addTab(#{pnlCenter}, pageid, url, title, showmask, iconcls);
open(#{pCenter}, pageid, url, title, showmask, iconcls);
}
function open(panel, id, url, title, showmask, iconcls) {
panel.load({url: url});
}
function addTab(tabPanel, id, url, title, showmask, iconcls) {
var tab = tabPanel.getComponent(id);
if (showmask == undefined) showmask = true;
if (iconcls == undefined) iconcls = '';
if (!tab) {
tab = tabPanel.add({
id: id,
title: title,
closable: true,
iconCls: iconcls,
layout: "fit",
autoLoad: {
showMask: showmask,
url: url,
mode: "iframe",
maskMsg: "Loading " + title + "..."
}
});
}
tabPanel.setActiveTab(tab);
}
What is the correct way to add/activate a tab?I tried following this example:
Dynamic Partial Rendering
However, the tab does not get added. This is my controller:
public ActionResult AddTab(string containerId)
{
var result = new Ext.Net.MVC.PartialViewResult
{
ViewName = "Index",
Model = new CSCAttendance.Models.StudentsModel(),
ContainerId = containerId,
RenderMode = Ext.Net.RenderMode.AddTo
};
this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
return result;
}
In the main view: Html.X().TabPanel()
.ID("main.Tabs")
.Layout(LayoutType.Fit)
.Region(Region.Center)
.Border(false)
.Title("")
.Padding(5)
.Items(
Html.X().Panel()
.Title(DateTime.Now.ToLongTimeString())
.Closable(true)
.ID("studentRegistration.Index")
.Layout(LayoutType.Fit)
.Html("<h2>Test</h2>")
)
The menu button: m.Add(Html.X().MenuItem()
.ID("menu.StudentRegistration")
.Hidden(!Model.StudentRegistration)
.Text("Student Registration")
.Icon(Icon.UserAdd)
.DirectEvents(de => {
de.Click.Url = Url.Action("AddTab", "Students");
de.Click.ExtraParams.Add(new { containerId = "main.Tabs" });
})
);
The menu is in the west panel of a viewport and is loaded dynamically. The tabs (main.Tabs) are in the center region of the viewport.The request/response looks correct. When debuging, the controller sends back:
{script:"Ext.ComponentManager.onAvailable(\"Tabs\",function(){Ext.net.addTo(\"main.Tabs\", [{id:\"studentRegistration.Index\",html:\"<h2>Student Registration</h2>\",xtype:\"panel\",layout:\"fit\",closable:true,title:\"10:18:02 PM\"}], false);App.main.Tabs.setLastTabAsActive();});"}
My guess is that its not finding "main.Tabs". How do I correct this?Thanks.
Amit
Last edited by Baidaly; May 21, 2013 at 12:48 AM.
Reason: [CLOSED]