[CLOSED] Window opened within tabPanel client area.

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Window opened within tabPanel client area.

    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...

    Attachment 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?
    Last edited by Daniil; Mar 08, 2012 at 5:45 PM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    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>
  4. #4
    You should open/create a Window within a parent page.

    Please follow how it might be achieved.
    http://forums.ext.net/showthread.php...ll=1#post73736
  5. #5
    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"....
  6. #6
    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.
  7. #7
    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?
  8. #8
    I thinks it runs out of the thread topic, please start a new one.
  9. #9
    Ok!

    I will do this!

    Thanks a lot for your help!
  10. #10
    Has been the initial problem solved, right?
Page 1 of 2 12 LastLast

Similar Threads

  1. Determine if tab is opened?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jun 13, 2012, 3:30 PM
  2. [CLOSED] [1.0] Best way to change window width (client)
    By CarWise in forum 1.x Premium Help
    Replies: 1
    Last Post: Jun 17, 2010, 6:42 PM
  3. on button click another tab should be opened
    By kiran malgi in forum 1.x Help
    Replies: 1
    Last Post: Mar 27, 2010, 5:19 PM
  4. Replies: 2
    Last Post: Jan 14, 2009, 4:19 PM
  5. Replies: 2
    Last Post: Dec 03, 2008, 10:59 AM

Posting Permissions