PDA

View Full Version : [CLOSED] ext:TabPanel: adding controls in JavaScript.



supera
Apr 25, 2012, 9:15 PM
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.



<%@ 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>

geoffrey.mcgill
Apr 25, 2012, 9:17 PM
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?

The only way would be to have each Tab (Panel) use the <Loader> to load an internal <iframe>. The id's could be the same inside each <iframe>, but must be unique if all used on the same Page.

supera
Apr 25, 2012, 9:26 PM
Hi Geoffrey!



The id's could be the same inside each <iframe>, but must be unique if all used on the same Page


To follow your suggestion, I need insert my components in a new aspx page and call this page? Or i can adding in Javascript? If yes, How i do this?

Daniil
Apr 26, 2012, 11:02 AM
Hi,

Well, generally, it doesn't matter how you will add components to that iframe page. You can add either in markup or JavaScript.

If you don't want iframes, I would suggest to look into the itemId functionality.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-itemId

supera
Apr 26, 2012, 12:20 PM
Hi Daniil

I think that itemId it's exactly what I need...

Thanks a lot.

supera
Apr 26, 2012, 2:00 PM
One more question about this subject...

And store object? I need change storeId???



storeId: "Store1"

Daniil
Apr 26, 2012, 5:31 PM
Yes, there is no itemId functionality in Store. You have to set up unique ids.

Or, if it's acceptable, you can avoid setting up ids for Stores and place them as a value of the "store" config option of components. Then you can access these Stores like this:

grid.getStore();

comboBox.getStore();

supera
Apr 26, 2012, 5:44 PM
Hi Daniil!

Thanks a lot... works fine.

Thanks;