Apr 25, 2012, 8:15 PM
[CLOSED] ext:TabPanel: adding controls in JavaScript.
Hi!
I'm adding controls in tabPanel with Javascript.
My problem may seem confusing at first ... I am wanting to create exactly the same controls on each tab, with the same IDs.
If I add one tab, works fine.
If I add the second tab, I get problems.
I think it´s occurs because the Id are the same.
It is important to me that the controls have the same id. Is there any way I can create the controls and they become 'encapsulated' in the tab, without interference from the other tab controls?
I made a simple project to explain my problem... To test, add tabs and click in Delete button, for example.
I'm adding controls in tabPanel with Javascript.
My problem may seem confusing at first ... I am wanting to create exactly the same controls on each tab, with the same IDs.
If I add one tab, works fine.
If I add the second tab, I get problems.
I think it´s occurs because the Id are the same.
It is important to me that the controls have the same id. Is there any way I can create the controls and they become 'encapsulated' in the tab, without interference from the other tab controls?
I made a simple project to explain my problem... To test, add tabs and click in Delete button, for example.
<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.net test</title>
<script type="text/javascript">
var getTab = function() {
//monta o panel
vPane = {
id: "panelTab",
flex: 1,
//items: getGridPanel(xConf, xConf.activeQuery),
layout: "fit",
tbar: getTabBar()
};
return vPane;
};
var getTabBar = function() {
//1 - monta as barras
var tbXW = {
id: "tbWebExplorer",
xtype: "toolbar",
items: []
};
//btnAdd
tbXW.items.push({
id: "btnAdd",
iconCls: "#ApplicationAdd",
text: "Adicionar",
tooltip: "Adicionar registro",
listeners: {
click: {
fn: function (item, e) {
alert('btnAdd clicked');
}
}
}
});
//btnEdit
tbXW.items.push({
id: "btnEdit",
iconCls: "#ApplicationEdit",
text: "Editar",
tooltip: "Editar registro selecionado",
listeners: {
click: {
fn: function (item, e) {
alert('btnEdit clicked');
}
}
}
});
//btnDelete
tbXW.items.push({
id: "btnDelete",
iconCls: "#ApplicationDelete",
text: "Excluir",
tooltip: "Deletar registro(s) selecionados",
listeners: {
click: {
fn: function (item, e) {
alert('btnDelete clicked');
}
}
}
});
return tbXW;
};
var addTab = function (tabPanel, id, title) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: title,
closable: true,
items: getTab(),
layout: 'fit'
});
}
tabPanel.setActiveTab(tab);
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="panelCenter" runat="server" Region="Center" Flex="1" layout="FitLayout" BodyPadding="6" >
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button runat="server" ID="btnAddTab" Text="Add Tab 1" OnClientClick = "addTab(#{tabWebExplorer}, 'tab1', 'Tab 1')" />
<ext:Button runat="server" ID="btnAddTab1" Text="Add Tab 2" OnClientClick = "addTab(#{tabWebExplorer}, 'tab2', 'Tab 2')" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:TabPanel ID="tabWebExplorer" runat="server" Plain="true" Flex="1" Layout="FitLayout">
<Items>
<ext:Panel runat="server" ID="paneMyPage" Title="MyPage" Icon="ApplicationHome">
</ext:Panel>
</Items>
<Plugins>
<ext:TabScrollerMenu ID="TabScrollerMenu1" runat="server" PageSize="90" />
</Plugins>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Apr 26, 2012 at 4:45 PM.
Reason: [CLOSED]
