Jul 04, 2011, 4:29 PM
Populate a TabPanel with AutoLoad and RenderTo
Hi All,
I am having some problems when trying to populate a TabPanel with a new tab and loading into that tab a partial view from my Controller. This is basically my Javascript:
Any idea what is the correct method to achieve what I would like to achieve?
Regards.
I am having some problems when trying to populate a TabPanel with a new tab and loading into that tab a partial view from my Controller. This is basically my Javascript:
var addTab = function (tabPanel, id, title, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: title,
closable: true,
autoLoad: { url: url, params: { containerId: id }, scripts: true }
});
}
tabPanel.setActiveTab(tab);
}
function menuItemClick(item) {
var tabPanel = Ext.getCmp('TabPanel1');
var url = '/ConfigTool/Details/' + item.id.substring(4);
addTab(tabPanel, 'sysDetails' + item.id.substring(4), item.text, url);
}
The partial view is something as simple as:<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<h1>HELLO!</h1>
The controller simply does:public ActionResult Details(int id, string containerId)
{
var pr = new Ext.Net.MVC.PartialViewResult(containerId);
return pr;
}
Now, if in the params section for the autoLoad I do something like this: params: { containerId: tabPanel.body.id }
I get it working but of course it gets rendere in the actual tabPanel body, so when I switch tab back and forward I have the same content on screen...Any idea what is the correct method to achieve what I would like to achieve?
Regards.