PDA

View Full Version : [CLOSED] Add refresh button to dynamically created tab



blueworld
Oct 10, 2013, 2:35 PM
Hi,

I have a tab panel that adds tabs on the fly.

Is there a way to add a reload button next to the close button of each tab?
I have seen this property at panels, its called Tools, Type="Refresh"

I would need to call #{TabPanel}.getActiveTab().getLoader().load(); in the click listener.

In aspx markup it would be like this:




<Tools>
<ext:Tool Type="#{TabPanel}.getActiveTab().getLoader().load();" />
</Tools>



I am not very familiar with creating components in js yet, sorry, i need it in this part:




tab = tabPanel.add({
id : id,
title : "Tour "+cid,
closable : true,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Lade Informationen zu Tour " + cid + "..."
}
}
});

Daniil
Oct 10, 2013, 3:23 PM
Hi @blueworld,

You always can create it in markup and see a produced script.

For example, this

<ext:Panel runat="server">
<Loader Url="http://ext.net" Mode="Frame" />
<Tools>
<ext:Tool Type="Refresh" Handler="owner.ownerCt.reload();" />
</Tools>
</ext:Panel>
produces

Ext.create("Ext.panel.Panel", {
loader: {
"renderer": "frame",
"url": "http://ext.net"
},
tools: [{
type: "refresh",
handler: function (event, toolEl, owner, tool) {
owner.ownerCt.reload();
}
}]
});

blueworld
Oct 10, 2013, 3:28 PM
Thank you Daniil.

I am still not sure how I should extend my code. I got this from a demo.
What kind of Component I am adding to the tabpanel?
There is nothing like Ext.create(...)

This is not working, there is just a close button:




tab = tabPanel.add({
id : id,
title : "Tour "+cid,
closable : true,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Lade Informationen zu Tour " + cid + "..."
}
},
tools: [{
type: "refresh",
handler: function (event, toolEl, owner, tool) {
owner.ownerCt.reload();
}
}]
});

Daniil
Oct 10, 2013, 3:35 PM
You pass a tab's config to the tabPanel's add method.

A similar config is passed as the second argument of an Ext.create call.

So:

tabPanel.add({
loader: {
"renderer": "frame",
"url": "http://ext.net"
},
tools: [{
type: "refresh",
handler: function (event, toolEl, owner, tool) {
owner.ownerCt.reload();
}
}]
/* other settings */
});

blueworld
Oct 10, 2013, 3:40 PM
Hmmm...

this creates just tabs with a close button, no refresh button. Whats wrong?




tab = tabPanel.add({
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Lade Informationen zu Tour " + cid + "..."
}
},
tools: [{
type: "refresh",
handler: function (event, toolEl, owner, tool) {
owner.ownerCt.reload();
}
}],
id : id,
title : "Tour "+cid,
closable : true
});

blueworld
Oct 10, 2013, 3:51 PM
Full non-working example




<%@ Page Language="VB" %>

<%@ Import Namespace="System.Collections.Generic" %>

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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title></title>

<ext:XScript ID="XScript1" runat="server">
<script>
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);

if (!tab) {
tab = tabPanel.add({
id : id,
title : url,
closable : true,
menuItem : menuItem,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
},
tools: [{
type: "refresh",
handler: function (event, toolEl, owner, tool) {
owner.ownerCt.reload();
}
}]
});

tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}

tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="700"
Height="500"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:MenuPanel
ID="MenuPanel1"
runat="server"
Width="200"
Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net', this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem ID="MenuItem2" runat="server" Text="Ext.NET forums">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem ID="MenuItem3" runat="server" Text="Sencha">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
</Items>
</ext:Window>

</form>
</body>
</html>

Baidaly
Oct 10, 2013, 9:34 PM
Hello!

Try the following one:


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

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

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title></title>

<ext:XScript ID="XScript1" runat="server">
<script>
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);

if (!tab) {
tab = tabPanel.add({
id : id,
title : url,
closable : true,
menuItem : menuItem,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
}
});

tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}

tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="700"
Height="500"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:MenuPanel
ID="MenuPanel1"
runat="server"
Width="200"
Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net', this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem ID="MenuItem2" runat="server" Text="Ext.NET forums">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);" />
</Listeners>
</ext:MenuItem>

<ext:MenuSeparator />

<ext:MenuItem ID="MenuItem3" runat="server" Text="Sencha">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
<TabBar>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Flat="true" Icon="PageRefresh">
<Listeners>
<Click Handler="
this.up('tabpanel').getActiveTab().reload();
"></Click>
</Listeners>
</ext:Button>
</TabBar>
</ext:TabPanel>
</Items>
</ext:Window>

</form>
</body>
</html>