[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 + "..."
                        }
                    });
                    }
                    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]
  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.

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

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

    Thanks,
    Amit

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