PDA

View Full Version : [CLOSED] Add dynamic TabStripItem in javascript



Tactem
Jan 02, 2013, 1:46 PM
Hi guys,

Happy new year 2013.


Actually i have a classic tabPanel and add tabPanel item with this js function


//Add tab in Tabpanel
function addTabs(type, guid)
{
try {
var index = Ext.getCmp('TabPanel').items.length + 1;
var tab = Ext.getCmp('TabPanel').add(
{
id: "Tab" + index,
title: type,
closable: true,
layout: 'fit',
border: false,
loader:
{
url: "../modules/TestView.aspx?i=" + index + "&g=" + guid,
renderer: "frame"
}
});
Ext.getCmp('TabPanel').setActiveTab(tab);
}
catch (err) {
App.direct.UnhandledException('AddTabs '+ err);
}
}

But now i must have right button same this http://examples2.ext.net/#/TabPanel/TabStrip/Overview/ (http://Example)

I don't find tabStrip in EXTjs.

How add dynamic tabStripItem (same my function dynamic tabPanel item) ?

It's possible to have a loader with url also ?

Test.aspx

<ext:Panel ID="_pnlMainCnt" runat="server" Region="Center" CMargins="1" Margins="1"
Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:TabStrip ID="_tsCntrCnt" runat="server">
<Items>
</Items>
</ext:TabStrip>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:Button ID="Button3" runat="server" Icon="Key" />
<ext:Button ID="Button4" runat="server" Icon="Help" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>

Regards

Yoann

Daniil
Jan 02, 2013, 2:23 PM
Hi Yoann,

Hope this example helps.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var addTab = function () {
var newTab = Ext.create("Ext.container.Container", {
id: "newTab",
renderTo: Ext.getBody(),
hidden: true,
height: 400,
width: 400,
loader: {
renderer: "frame",
url: "http://ext.net",
loadMask: {
showMask: true
}
}
}),
newTabStripItem = App.TabStrip1.add({
text: "New tab",
actionItem: "newTab"
});

App.TabStrip1.setActiveTab(newTabStripItem);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Add tab" Handler="addTab" />

<ext:TabStrip ID="TabStrip1" runat="server">
<Items>
<ext:Tab Text="Summary" ActionItemID="elm1" />
<ext:Tab Text="Data" ActionItemID="elm2" />
</Items>
</ext:TabStrip>

<div id="elm1" style="padding:5px;">Summary</div>
<div id="elm2" style="padding:5px;">Data</div>
</form>
</body>
</html>

Tactem
Jan 02, 2013, 3:52 PM
Thx Daniil,

it's work perfectly with this


function addTabs(type, guid)
{
try {
var index = Ext.getCmp('TabStrip').items.length + 1;
var newTab = Ext.create("Ext.container.Container", {
id: "Tab" + index,
renderTo: Ext.getBody(),
hidden: true,
layout: 'fit',
border: false,
loader: {
renderer: "frame",
url: "../modules/Dashboard/Test.aspx?i=" + index + "&g=" + guid,
loadMask: {
showMask: true
}
}
})
var newTabStripItem = App.TabStrip.add({
text: type,
closable: true,
actionItem: "Tab" + index
});
Ext.getCmp('PanelTab').add(newTab);
App.TabStrip.setActiveTab(newTabStripItem);

}
catch (err) {
App.direct.UnhandledException('AddTabs ' + err);
}
}