Populate a TabPanel with AutoLoad and RenderTo

  1. #1

    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:
    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.
  2. #2
    Try this
    autoLoad: { url: url, params: { containerId: function(){return this.body.id;} }, scripts: true }
  3. #3
    HI,

    That works indeed! :)

    I was able to get a working solution in this other way too:
    if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: title,
                    closable: true
                });
            }
            tabPanel.setActiveTab(tab);
            tab.body.load({ url: url, params: { containerId: tab.body.id }, scripts: true });
    And setting the LayoutOnTabChange=true for the tabPanel.

    Thanks for the answer!
    Regards.

Similar Threads

  1. [CLOSED] [1.0] TabPanel AutoLoad with IE 7/8 on Windows XP
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 16, 2010, 12:34 PM
  2. [CLOSED] [1.0] MVC and TabPanel AutoLoad
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 26, 2010, 10:40 AM
  3. Tabpanel - Autoload slow?
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Jun 26, 2009, 12:10 PM
  4. AutoLoad Panel Populate Child Page Error
    By camus92 in forum 1.x Help
    Replies: 5
    Last Post: Mar 09, 2009, 4:08 PM
  5. AutoLoad is missing in TabPanel
    By koresx in forum 1.x Help
    Replies: 1
    Last Post: Dec 30, 2008, 5:24 AM

Tags for this Thread

Posting Permissions