PDA

View Full Version : [CLOSED] How do you add a Portlet to a Portal Column from JavaScript?



leonardm
Jun 03, 2014, 9:13 PM
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).ArrowAli gn(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!

Daniil
Jun 04, 2014, 5:23 AM
Hi @leonardm,

Your code produces a JavaScript error.

Ext.ux.Portlet is not a constructor

Please clarify have you seen that? It is very worth to be able to see JavaScript errors. Do you know how to see them?

You should use Ext.app.Portlet instead of Ext.ux.Portlet.

leonardm
Jun 04, 2014, 5:21 PM
Hi @leonardm,

Your code produces a JavaScript error.

Ext.ux.Portlet is not a constructor

Please clarify have you seen that? It is very worth to be able to see JavaScript errors. Do you know how to see them?

You should use Ext.app.Portlet instead of Ext.ux.Portlet.

That fixed it. Thank You.

I had originally found Ext.ux.Portlet code from this thread (http://forums.ext.net/showthread.php?17356-CLOSED-Adding-Portlet-Dynamically-JavaScript)

Please close this.