PDA

View Full Version : [CLOSED] insert new tab with dynamic treeview



ucaneto
May 27, 2014, 7:51 PM
I have a dynamic TreePanel and would like when you click a menu item to create a new tab and open the url of the application.
What do I do?




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/main.css" rel="stylesheet" />
<style type="text/css">
.my-background {
background: url('/imagens/fundos/fundo1.gif') no-repeat;
background-size: 100%;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
runat="server"
Header="false"
Region="North"
Border="false"
Height="90" ID="HeaderPrincipal">
<Content>
<div class="header">
<div class="left">
<div class="title">
Sistema Integrado de Imobiliaria <span class="title-sub">(vers?o 1.1)</span>
</div>
</div>
<div class="right">
<ext:Button ID="btnSair" runat="server" Text="Sair do Sistema" AutoPostBack="True" BaseCls="button" IconAlign="Top" MenuArrow="False">
</ext:Button>
</div>
</div>
</Content>
</ext:Panel>
<ext:Panel
runat="server"
Region="West"
Width="200"
ID="pnlSettings"
Title="Menu Principal"
Collapsible="true"
Split="true"
MinWidth="175"
MaxWidth="400"
MarginsSummary="31 0 5 5"
CMarginsSummary="31 5 5 5"
Layout="Border">
<Items>
<ext:TreePanel
runat="server"
EnableDrag="true"
Region="West"
DDGroup="tree2div"
Header="false"
Split="true"
Margins="5 0 5 5"
Width="200"
Title="Tree"
AutoScroll="true"
ID="TreePanel1"
Collapsible="false">

</ext:TreePanel>
</Items>
</ext:Panel>
<ext:TabPanel
ID="tabs"
runat="server"
Region="Center"
Margins="0 4 4 0"
MinTabWidth="115">
<Items>
<ext:Panel
ID="tabHome"
runat="server"
Title="Home"
HideMode="Offsets"
BodyStyle="background-image:url('/imagens/fundos/fundo1.gif');background-repeat:no-repeat; background-size: 100%;"
Icon="Application">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


Code em C#


protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{

Ext.Net.Node treeNode = new Ext.Net.Node();
treeNode.Text = "Menu";
TreePanel1.Root.Add(GetNodes(0, treeNode));
treeNode.Expanded = true;
this.TreePanel1.Listeners.ItemClick.Handler = "addTab(App.TabPanel1, record);";
}

}

#region Criar os nodes filhos
private Ext.Net.Node GetNodes(int Row, Ext.Net.Node treeNode)
{
TblmenuCollection coll = new TblmenuCollection();
XPerfilPermissoesCollection pcoll = new XPerfilPermissoesCollection();
XPerfilPermissoesQuery odq = new XPerfilPermissoesQuery("odq");

TblmenuQuery oq = new TblmenuQuery("oq");
oq.Select(oq.Idpai, oq.Id, oq.Menu, oq.Formulario, odq.Inclui, odq.Altera, odq.Exclui, odq.Idperfil, oq.Icone);
oq.InnerJoin(odq).On(oq.Id == odq.Idmenu);

oq.Where(odq.Visualiza == 1);
//oq.Where(oq.Idpai == Row);
oq.OrderBy(oq.Ordem.Ascending, oq.Idpai.Ascending);
coll.Load(oq);

var lst = from p in coll where p.Idpai == Row select p;

foreach (Tblmenu fc in lst)
{
Ext.Net.Node treeNode2 = new Ext.Net.Node();
treeNode2.NodeID = fc.Id.ToString();
treeNode2.Text = fc.Menu;
treeNode2.Qtip = fc.Menu;
treeNode2.NodeID = fc.Id.ToString();

if (!String.IsNullOrEmpty(fc.Icone))
{
Icon MeuIcone = ParseEnum<Icon>(fc.Icone);
treeNode2.Icon = MeuIcone;

}
if (!string.IsNullOrEmpty(fc.Formulario))
{
treeNode2.Href = this.Page.ResolveUrl(fc.Formulario);
}
var lst1 = from p in coll where p.Idpai == fc.Id select p;
if (lst1.Count() > 0)
{
GetNodes((Int32)fc.Id, treeNode2);
treeNode2.Leaf = false;
}
else
{
treeNode2.Leaf = true;
}


treeNode.Children.Add(treeNode2);

}
return treeNode;

}
public static T ParseEnum<T>(string value)
{
return (T)Enum.Parse(typeof(T), value, true);
}

#endregion

geoffrey.mcgill
May 27, 2014, 8:00 PM
The Examples Explorer works exactly like your requirements.

The full source code of the Examples Explorer is available to you, and the code demonstrates the technique of creating a new Tab on selection of a TreePanel item.

ucaneto
May 27, 2014, 9:25 PM
The Examples Explorer works exactly like your requirements.

The full source code of the Examples Explorer is available to you, and the code demonstrates the technique of creating a new Tab on selection of a TreePanel item.

Hello

Resolved please close the post

follows the solution


<ext:Panel
runat="server"
Region="West"
Width="200"
ID="pnlSettings"
Title="Menu Principal"
Collapsible="true"
Split="true"
MinWidth="175"
MaxWidth="400"
MarginsSummary="31 0 5 5"
CMarginsSummary="31 5 5 5"
Layout="Border">
<Items>
<ext:TreePanel
runat="server"
EnableDrag="true"
Region="West"
DDGroup="tree2div"
Header="false"
Split="true"
Margins="5 0 5 5"
Width="200"
Title="Tree"
AutoScroll="true"
ID="TreePanel1"
Collapsible="false">

<Listeners>
<ItemClick Handler="if (record.data.href) { e.stopEvent(); loadPage(#{PanelBody}, record); }" />
</Listeners>
</ext:TreePanel>
</Items>
</ext:Panel>

In Head


<head runat="server">
<link href="css/main.css" rel="stylesheet" />
<style type="text/css">
.my-background {
background: url('/imagens/fundos/fundo1.gif') no-repeat;
background-size: 100%;
}
</style>
<script>
var loadPage = function (tabPanel, record) {
var tab = tabPanel.getComponent(record.getId());

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

tabPanel.setActiveTab(tab);
};
var handler = function (grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
};
</script>

<title></title>
</head>