PDA

View Full Version : [CLOSED] Dynamically add tab



AmitM
May 20, 2013, 2:20 AM
In Ext 1.x, I used this code:



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 (http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/)

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

AmitM
May 20, 2013, 2:41 AM
It seems that I figure it out only minutes after I post the question.

Changing ID = "main.Tabs" to ID = "mainTabs" fixed it.

Next time, I might just post to the forum before spending a couple hours trying to figure it out.

-Amit

geoffrey.mcgill
May 20, 2013, 3:27 AM
Hi,

I'm pretty sure a '.' is not an acceptable character for an ID, which gets translated into the client-side .id.

It's possible that it might work under some scenarios, but I would recommend removing all instances of '.' if set in any .ID property.

Hope this helps.

Baidaly
May 20, 2013, 11:23 PM
Hello!

@AmitM can we close this thread?

AmitM
May 20, 2013, 11:44 PM
Absolutely.

Thanks,
Amit