PDA

View Full Version : [CLOSED] Window opened within tabPanel client area.



supera
Mar 07, 2012, 3:46 PM
Hi!

I´m loading a aspx page into a tabPanel. This page contains a gridPanel. When I click in gridPanel, a details window is opened.
The problem is:
The window is opened within the tabPanel area... With the size of window is more large of tabPanel area, the top and botton of window is hidden...
Please, see image attached...

3915

I wish that window was opened over tabPanel and not within of tabPanel. But I don´t wish change the code of aspx page loaded into tabPanel because the window raise events in this aspx page.

Any help?

Daniil
Mar 07, 2012, 4:30 PM
Hi,

To get a Window to be exceeded an iframe (your tab page), that Window must be created/opened in its parent, This is the single way.

This might help:
http://forums.ext.net/showthread.php?9935

supera
Mar 07, 2012, 5:31 PM
Hi Danill! Thanks for your response!

how I can get the parent?

I can not imagine any way.

I created a simple sample representing the structure of my application.

test19 is mainpage, with toolbars (please click in customer button to create a new tab with a test20 aspx page inside)

test20 is a page with my gridPanel and the detail window. (in my application, this page is custom with the context of button clicked in toolbar - records, detail window, filters, etc.)

test21 is a page with Details of record select in gridPanel in test20 aspx page. This page is loaded within window of test20 page.

I need set the renderTo parameter of window (wndDetails) in test20 page to test19 page. It should be simple, but do not know how. You can help me?



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test19.aspx.vb" Inherits="WebApplication3.Test19" %>
<%@ 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></title>

<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, contextID, Title) {
var tab = tabPanel.getComponent(contextID);

if (!tab) {
tab = tabPanel.add({
id: contextID,
title: Title,
closable: true,
loader: {
url: "test20.aspx?ContextID=" + contextID,
renderer: "frame",
loadMask: {
showMask: true,
msg: "carregando " + Title + "..."
}
}
});
}

tabPanel.setActiveTab(tab);
};
</script>
</ext:XScript>

</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
<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 runat="server" ID="tbGeral">
<Items>
<ext:TabPanel runat="server" ID="tbMain" BodyPadding="0" Height="125" flex="1" >
<Items>
<ext:Panel runat="server" ID="tbCadastros" Title="Cadastros" Layout="FitLayout">
<TopBar><ext:Toolbar ID="Toolbar1" runat="server"><Items>
<ext:ButtonGroup ID="bgEmpresas" runat="server" Columns="2" Title="Clientes">
<Items>
<ext:SplitButton runat="server" ID="btcClientes" Text="Customers" Scale="Large" ArrowAlign="Bottom" IconAlign="Top" RowSpan="3" OnClientClick="addTab(#{tabWebExplorer}, 'Clientes', 'Clientes');">
<Menu>
<ext:Menu ID="Menu3" runat="server">
<Items>
<ext:MenuItem runat="server" ID="mncClientesGrupos" Text="Grupos" OnClientClick="addTab(#{tabWebExplorer}, 'Clientes.Grupos', 'Grupos (Clientes)');" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="btgFornecedores" runat="server" Columns="2" Title="Fornecedores">
<Items>
<ext:SplitButton runat="server" ID="btcFornecedores" Text="Fornecedores" Scale="Large" ArrowAlign="Bottom" IconAlign="Top" RowSpan="3" OnClientClick="addTab(#{tabWebExplorer}, 'Fornecedores', 'Fornecedores');" >
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem runat="server" ID="mncFornecedoresFuncoes" Text="Funções" OnClientClick="addTab(#{tabWebExplorer}, 'Fornecedores.Funcoes', 'Funções (Fornecedores)');" />
<ext:MenuItem runat="server" ID="mncFornecedoresGrupos" Text="Grupos" OnClientClick="addTab(#{tabWebExplorer}, 'Fornecedores.Grupos', 'Grupos (Fornecedores)');" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" ID="btcFornecedoresFuncoes" Text="Funções" OnClientClick="addTab(#{tabWebExplorer}, 'Fornecedores.Funcoes', 'Funções (Fornecedores)');" />
<ext:Button runat="server" ID="btcFornecedoresGrupos" Text="Grupos" OnClientClick="addTab(#{tabWebExplorer}, 'Fornecedores.Grupos', 'Grupos (Fornecedores)');" />
<ext:Button runat="server" ID="btsFornecedores"/>
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="bgAgendas" runat="server" Title="Agenda" Columns="2">
<Items>
<ext:SplitButton runat="server" ID="btCAgenda" Text="Agenda" Scale="Large" ArrowAlign="Bottom" IconAlign="Top" RowSpan="3" OnClientClick="addTab(#{tabWebExplorer}, 'Agenda', 'Agenda');">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:menuitem runat="server" ID="mnAgendaAniversarios" Text="Aniversários" OnClientClick="addTab(#{tabWebExplorer}, 'Agenda.Aniversarios', 'Aniversários');" />
<ext:menuitem runat="server" ID="mncAgendaSalas" Text="Agenda de Salas" OnClientClick="addTab(#{tabWebExplorer}, 'Agenda.Salas', 'Agendas de Salas');" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" ID="btcAgendaAniversarios" Text="Aniversários" Scale="Medium" OnClientClick="addTab(#{tabWebExplorer}, 'Agenda.Aniversarios', 'Aniversários');" />
<ext:Button runat="server" ID="btcAgendaSalas" Text="Salas" Scale="Medium" TextAlign="Center" OnClientClick="addTab(#{tabWebExplorer}, 'Agenda.Salas', 'Agendas de Salas');" />
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="btgNegocios" runat="server" Title="Negócios" Columns="2">
<Items>
<ext:Button runat="server" ID="btcNegocios" Text="Negócios" IconUrl="~/resources/images/toolbar/32x32/negocios.png" Scale="Large" ArrowAlign="Bottom" IconAlign="Top" RowSpan="3">
<Menu>
<ext:Menu ID="menuCotacoes" runat="server">
<Items>
<ext:menuitem runat="server" ID="mncRequisicoes" Text="Requisições" IconUrl="~/resources/images/toolbar/16x16/requisicoes.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Requisicoes', 'Requisicoes');" />
<ext:menuitem runat="server" ID="mncCotacoes" Text="Cotações" IconUrl="~/resources/images/toolbar/16x16/cotacoes.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Cotacoes', 'Cotações');" />
<ext:menuitem runat="server" ID="mncOrdemCompra" Text="Ordens de compra" IconUrl="~/resources/images/toolbar/16x16/ordem_compra.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Ordem_Compra', 'Ordens de Compra');" />
<ext:menuitem runat="server" ID="mncOrdemServico" Text="Ordens de serviço" IconUrl="~/resources/images/toolbar/16x16/ordem_servico.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Ordem_Servico', 'Ordens de Serviço');" />
<ext:menuitem runat="server" ID="mncCotacoes_Mapa" Text="Mapa de cotações" IconUrl="~/resources/images/toolbar/16x16/mapa_cotacoes.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Cotacoes.Mapa', 'Mapa de cotações');" />
<ext:menuitem runat="server" ID="mncOrdemCompra_Mapa" Text="Mapa de compras" IconUrl="~/resources/images/toolbar/16x16/mapa_compras.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Ordem_Compra.Mapa', 'Mapa de compras');" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" ID="btnRequisicoes" Text="Requisições" Scale="Medium" IconUrl="~/resources/images/toolbar/24x24/requisicoes.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Requisicoes', 'Requisicoes');" />
<ext:Button runat="server" ID="btnCotacoes" Text="Cotações" Scale="Medium" IconUrl="~/resources/images/toolbar/24x24/cotacoes.png" OnClientClick="addTab(#{tabWebExplorer}, 'Negocios.Cotacoes', 'Cotações');" />
</Items>
</ext:ButtonGroup>
</Items></ext:Toolbar></TopBar>
</ext:Panel>
<ext:Panel runat="server" ID="Panel1" Title="Financeiro" />
<ext:Panel runat="server" ID="Panel2" Title="Ferramentas" />
</Items>
</ext:TabPanel>
</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>
<ext:StatusBar runat="server" ID="stbSGCO" Region="South" StatusAlign="Right">
<Items>
<ext:ToolbarTextItem runat="server" ID="txtEmpresaLogada" Text="EmpresaLogada" />
<ext:ToolbarSeparator ID="ToolbarSeparator5" runat="server" />
<ext:ToolbarTextItem runat="server" ID="txtServerName" Text="ServerName" />
<ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
<ext:ToolbarTextItem runat="server" ID="txtDataBaseName" Text="DatabaseName" />
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:Button runat="server" ID="btnUsuarioLogado" Text="User" Icon="User">
<Menu>
<ext:Menu runat="server" ID="mnUsuarioLogado" Icon="UserAlert">
<Items>
<ext:MenuItem runat="server" ID="mnUsarioLogadoExit" text="Sair" Icon="UserDelete">
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
<ext:ToolbarFill runat="server" ID="tbfill100" />
<ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
<ext:Button runat="server" ID="btnMural" Text="Mural" Icon="NoteGo" />
<ext:ToolbarSeparator ID="ToolbarSeparator6" runat="server" />
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" text="teste" />
</Items>
</ext:StatusBar>
</Items>
</ext:Viewport>
<ext:Hidden runat="server" ID="txtIDEmpresa" Text="0" /> <%--Guarda o código da empresa ativa--%>
</form>
</body>
</html>




<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test20.aspx.vb" Inherits="WebApplication3.Test20" %>
<%@ 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">

<script runat="server" >

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

BuildSet(gridPanel1, store1)

End Sub

Protected Sub store1_RefreshData(sender As Object, evt As StoreRefreshDataEventArgs)
BuildSet(gridPanel1, store1)
End Sub

Private Function getDataTable() As System.Data.DataTable
Dim table As System.Data.DataTable = New System.Data.DataTable

table.Columns.Add(New System.Data.DataColumn("ID"))
table.Columns.Add(New System.Data.DataColumn("NAME"))

table.Rows.Add(1, "a")
table.Rows.Add(2, "b")
table.Rows.Add(3, "c")
table.Rows.Add(4, "d")
table.Rows.Add(5, "e")
table.Rows.Add(6, "f")
table.Rows.Add(7, "g")
table.Rows.Add(8, "h")
table.Rows.Add(9, "i")
table.Rows.Add(10, "j")
table.Rows.Add(11, "l")
table.Rows.Add(12, "m")
table.Rows.Add(13, "n")
table.Rows.Add(14, "o")
table.Rows.Add(15, "p")

Return table

End Function

Protected Sub BuildSet(gridPanel As Ext.Net.GridPanel, store As Ext.Net.Store)
Dim colConf As Ext.Net.Column.Config

If (ExtNet.IsAjaxRequest) Then
store.RemoveFields()
End If

'refaz os campos do modelo
Me.AddField(store, New ModelField("ID", Ext.Net.ModelFieldType.Int))
Me.AddField(store, New ModelField("NAME", Ext.Net.ModelFieldType.String))
store.RebuildMeta()

Me.BindSet(store)

colConf = New Ext.Net.Column.Config
colConf.DataIndex = "ID"
colConf.Text = "ID"
gridPanel.ColumnModel.Columns.Add(New Column(colConf))

colConf = New Ext.Net.Column.Config
colConf.DataIndex = "NAME"
colConf.Text = "NAME"
gridPanel.ColumnModel.Columns.Add(New Column(colConf))

If (ExtNet.IsAjaxRequest) Then
gridPanel.Reconfigure()
End If

End Sub

Private Sub BindSet(store As Ext.Net.Store)

store.DataSource = Me.getDataTable()
store.DataBind()

End Sub

Private Sub AddField(store As Ext.Net.Store, field As ModelField)
If (ExtNet.IsAjaxRequest) Then
store.AddField(field)
Else
store.Model(0).Fields.Add(field)
End If
End Sub

<DirectMethod()>
Public Sub CloseWindow(isCancel As Boolean)
wndDetails.Hide()
If Not isCancel Then
gridPanel1.Call("store.reload")
End If
End Sub

<DirectMethod()>
Public Sub ResizeWindow(iWidth As Integer, iHeigth As Integer)
wndDetails.Width = iWidth
wndDetails.Height = iHeigth
End Sub

Protected Sub EditRecord(sender As Object, evt As DirectEventArgs)
Dim recordID As String = evt.ExtraParams("recordID")

If recordID <> "null" Then 'se for apenas [], quer dizer que está vazio
'aqui eu vou carregar o formulário CRUD padrão para o contexto
wndDetails.Show()
wndDetails.Loader.Url = "test21.aspx?ID=" & recordID
wndDetails.LoadContent()

Else
Dim msg As New Ext.Net.MessageBox
msg.Alert("REGISTRO NÃO SELECIONADO", "Por favor, selecione um registro na lista para ver o detalhamento!")
msg.Show()
End If

End Sub

</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" Namespace="SuperaWeb.ExplorerWeb" />
<form id="form1" runat="server">
<div>
<ext:Viewport runat="server" ID="viewPort2">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="panelExplorerWebTab" Layout="FitLayout" Flex="1">
<Items>
<ext:GridPanel runat="server" ID="gridPanel1" Title="GridPanel 1" ColumnLines="true" X="0" Y="0" Width="240" Height="400">
<Store>
<ext:Store runat="server" ID="store1" OnReadData="store1_RefreshData">
<Model>
<ext:Model runat="server" ID="Model1">
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
<DirectEvents>
<CellDblClick OnEvent="EditRecord" >
</CellDblClick>
</DirectEvents>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window ID="wndDetails" runat="server" Icon="ApplicationFormEdit" Resizable="false" BodyPadding="6" Hidden="true" Modal="true" Constrain="true" Width="0" Height="0" DefaultButton="button[text=Ok]">
<Loader ID="Loader1" runat="server" AutoLoad="false" Url="test21.aspx" Mode="Frame">
<LoadMask Msg="Carregando..." ShowMask="true" />
</Loader>
<Buttons>
<ext:Button runat="server" ID="btnOk" Text="Ok" OnClientClick="SuperaWeb.ExplorerWeb.wndDetails.getBody().Ext.net .DirectMethods.SaveRecord();" icon="Accept"/>
<ext:Button runat="server" ID="btnCancel" Text="Cancel" OnClientClick="SuperaWeb.ExplorerWeb.wndDetails.close();" icon="Cancel"/>
</Buttons>
</ext:Window>
</div>
</form>
</body>
</html>




<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test21.aspx.vb" Inherits="WebApplication3.test21" %>
<%@ 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">
<script runat="server">

<DirectMethod()>
Public Sub SaveRecord()
Ext.Net.X.Js.Call("parent.Ext.net.DirectMethods.CloseWindow", False)
End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" Namespace="SuperaWeb.SGE.Cadastros.Empresas" />
<form id="form1" runat="server">
<ext:Viewport runat="server" ID="vwpEmpresasClasses">
<Items>
<ext:Panel runat="server" ID="panelEmpresasClasses" Layout="AbsoluteLayout" X="0" Y="0" Width="400" Height="65" BodyPadding="6">
<Defaults>
<ext:Parameter Name="LabelAlign" Value="Top" Mode="Value" />
</Defaults>
<Items>
<ext:TextField runat="server" ID="txtDescricao" FieldLabel="Descrição" X="10" Y="10" Width="375" MaxLength="100"/>
</Items>
<Listeners>
<AfterRender Handler="var win = parentAutoLoadControl.target || parentAutoLoadControl, //you can use just 'parentAutoLoadControl' after update to Ext.NET v2 beta.
size = this.getSize();
size.height += 75;
size.width += 25;
win.setSize(size);
win.center();"
Delay="100" />
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Mar 08, 2012, 7:23 AM
You should open/create a Window within a parent page.

Please follow how it might be achieved.
http://forums.ext.net/showthread.php?17151&p=73736&viewfull=1#post73736

supera
Mar 08, 2012, 11:09 AM
Well. I will try this...

1 - How I can call a directMethod in test19.aspx, when user dblclick in gridPanel row?



Ext.Net.X.Js.Call("parent.Ext.net.DirectMethods.ShowWindow", gridPanel.getStore())


This code will call a directMethod in test19.aspx? Because the test20.aspx is loaded in panel "paneMyPage", within tabPanel "tabWebExplorer", within panel "panelCenter"....

Daniil
Mar 08, 2012, 1:47 PM
Do you need to call it on client side? If yes, then just:

parent.Ext.net.DirectMethods.ShowWindow(...);

And it's wrong to pass a Store instance as a parameter, Store cannot be serialized to pass.

supera
Mar 08, 2012, 2:03 PM
Hi Daniil!

Thanks for you response!

In this window I'll load an aspx page that will be the window details of the selected record in my GridPanel.
So, when I click in Ok button, in Window, I need update the gridPanel of page that called the window.
What would be the best way to do this?

Daniil
Mar 08, 2012, 3:03 PM
I thinks it runs out of the thread topic, please start a new one.

supera
Mar 08, 2012, 3:29 PM
Ok!

I will do this!

Thanks a lot for your help!

Daniil
Mar 08, 2012, 4:06 PM
Has been the initial problem solved, right?

supera
Mar 08, 2012, 4:13 PM
It´s not solved, but you show me a way to solved it!
You can close this thread!
Thanks a lot for your help!