[CLOSED] Dynamically add tab

  1. #1

    [CLOSED] Dynamically add tab

    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 + "..."
    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
                return result;
    In the main view:
    The menu button:
                    .Text("Student Registration")
                    .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?

    Last edited by Baidaly; May 21, 2013 at 12:48 AM. Reason: [CLOSED]
  2. #2
    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.

  3. #3

    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.
    Geoffrey McGill
    Founder & CEO
  4. #4

    @AmitM can we close this thread?
  5. #5


Similar Threads

  1. Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  2. Replies: 2
    Last Post: Nov 23, 2011, 1:02 AM
  3. how to add controls dynamically
    By harshad.jadhav in forum 1.x Help
    Replies: 1
    Last Post: Oct 26, 2010, 1:14 PM
  4. MVC - how to add buttons dynamically?
    By Marcin in forum 1.x Help
    Replies: 0
    Last Post: Aug 04, 2010, 2:30 PM
  5. Dynamically add Listener
    By alanp5 in forum 1.x Help
    Replies: 2
    Last Post: May 21, 2009, 12:05 PM

Tags for this Thread

Posting Permissions