[CLOSED] How do you add a Portlet to a Portal Column from JavaScript?

[leonardm]

Hi,

The following is my Razor view:

@(X.Panel()
       .Title("Dashboard")      
       .ID("pnlDashboard")
       .IDMode(IDMode.Explicit)
       .IconCls("dashboard-icon")
       .Padding(5)
       .Closable(true)
       .Margins("0 0 0 0")
       .Layout(LayoutType.Border)
       .Items(
           X.Panel()
            .Region(Region.North)
            .Height(45)
            .Layout(LayoutType.HBox)
            .LayoutConfig(
                new HBoxLayoutConfig {Align = HBoxAlign.Stretch, DefaultMargins = "3", Pack = BoxPack.End}
               )
            .Items(
                X.Button().Flat(true).Cls("fa").Html("<i class='fa fa-plus-square-o fa-lg'></i>&nbsp;&nbsp;Add Portlet").UI(UI.Default).Scale(ButtonScale.Small).ArrowAlign(ArrowAlign.Right)
                .ToolTipType(ToolTipType.Title).ToolTip("Add Portlet")                
                 .Menu(X.Menu()                 
                        .Items(
                            X.MenuItem()
                             .Text("Open Films").Disabled(false).Listeners(ls=>ls.Click.Handler="AddPortlet(1);"),
                            X.MenuItem()
                             .Text("This week's Disney Releases").Disabled(false).Listeners(ls=>ls.Click.Handler="AddPortlet(2);"),
                            X.MenuItem()
                             .Text("Disney Films - Current Ultimates").Disabled(false).Listeners(ls=>ls.Click.Handler="AddPortlet(3);"),
                            X.MenuItem()
                             .Text("Year GBO to date").Disabled(false).Listeners(ls=>ls.Click.Handler="AddPortlet(4);"),
                            X.MenuItem()
                             .Text("Release Calendar").Disabled(false).Listeners(ls=>ls.Click.Handler="AddPortlet(5);")
                           )
                    ),
                X.Button().Flat(true).Cls("fa").Html("<i class='fa fa-floppy-o fa-lg'></i>&nbsp;&nbsp;Save Dashboard Layout").UI(UI.Default).Scale(ButtonScale.Small)
                .ToolTipType(ToolTipType.Title).ToolTip("Save Dashboard Layout").Listeners(ls=>ls.Click.Handler="SPARTA.Dashboard.SavePortletStates();")                
               ),
           X.Portal()
            .ID("portalMain")
            .Region(Region.Center)
            .Items(
                X.PortalColumn()
                 .ID("portalCol1"),
                 
                X.PortalColumn()
                 .ID("portalCol2"),
                 
                X.PortalColumn()
                 .ID("portalCol3")
                 
               )
          )                        
      )

As you can see, I have three columns defined for the Portal and all I want to do is to Add a Portlet to a Portal Column when the user select one from the Menu.

Here is my attempt at doing so but it doesn't work.

AddPortlet: function (id, title) {
          
            var portalCol1 = Ext.getCmp("portalCol1");

            if (portalCol1) {                

               // the following is giving me an error

                var portlet = new Ext.ux.Portlet({
                    //xtype: 'portlet',
                    //title: 'Test',
                    //heigh: 300
                });

                portalCol1.add(portlet);

            }
        },

Please help. Thanks!