Mar 08, 2012, 5:01 PM
[CLOSED] What is the best way to a Record Detail Window (ext:window dynamically created) update a gridPanel
Hi!
What is the best way to my Record Detail Window (opened in a ext:window dynamically created) update my gridPanel?
Test19.aspx page contains a ext:tabPanel. In this tabPanels, are loaded the Test20.aspx pages with a gridPanel.
When I dblclick in the row of gridPanel, is triggered a direct Method in Test19.aspx that will create a ext:window and load in this window the test21.aspx page.
When I click in 'Ok' button, the directMethod 'Save' in test21.aspx is triggered.
I need that the 'Save' directMethod in test21.aspx update the gridPanel in test20.aspx page.
Details:
1 - The test19.aspx page can contain several tabPanels, each one with a test20.aspx page loaded within, each page with a gridPanel loaded inside.
2 - The ext:window is created and loaded in test19.aspx page.
3 - To test the examples below, please, run Test19.aspx page and click in 'Customer' button! After, dblclick in row of gridPanel.
What is the best way to my Record Detail Window (opened in a ext:window dynamically created) update my gridPanel?
Test19.aspx page contains a ext:tabPanel. In this tabPanels, are loaded the Test20.aspx pages with a gridPanel.
When I dblclick in the row of gridPanel, is triggered a direct Method in Test19.aspx that will create a ext:window and load in this window the test21.aspx page.
When I click in 'Ok' button, the directMethod 'Save' in test21.aspx is triggered.
I need that the 'Save' directMethod in test21.aspx update the gridPanel in test20.aspx page.
Details:
1 - The test19.aspx page can contain several tabPanels, each one with a test20.aspx page loaded within, each page with a gridPanel loaded inside.
2 - The ext:window is created and loaded in test19.aspx page.
3 - To test the examples below, please, run Test19.aspx page and click in 'Customer' button! After, dblclick in row of gridPanel.
<%@ 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">
<script runat="server">
<DirectMethod()>
Public Sub ShowWindow(pContext As String, RecordId As String)
Dim wnd As Ext.Net.Window
wnd = getWindow("~/test21.aspx?ID=" & RecordId, pContext)
Me.Form.Controls.Add(wnd)
wnd.Render()
wnd.Show()
End Sub
Protected Function getWindow(Optional url As String = "~/test22.aspx", Optional pTitle As String = "test", Optional iconUrl As String = "") As Ext.Net.Window
Dim wnd As New Ext.Net.Window
Dim loader As New Ext.Net.ComponentLoader
Dim btn As Ext.Net.Button
loader.Url = url
loader.Mode = Ext.Net.LoadMode.Frame
loader.LoadMask.ShowMask = True
loader.LoadMask.Msg = "Carregando..."
wnd.ID = "window_" & (New System.Random).Next(Integer.MaxValue).ToString
wnd.Title = pTitle
If iconUrl <> "" Then
Else
wnd.Icon = Ext.Net.Icon.ApplicationForm
End If
wnd.AutoRender = False
wnd.Collapsible = False
wnd.Hidden = True
wnd.AutoRender = False
wnd.Maximizable = False
wnd.Resizable = False
wnd.BodyPadding = 6
wnd.Loader = loader
btn = New Ext.Net.Button
btn.ID = "btnOk"
btn.Text = "Ok"
btn.TextAlign = ButtonTextAlign.Center
btn.Icon = Icon.Accept
btn.OnClientClick = wnd.ClientID & ".getBody().Ext.net.DirectMethods.SaveRecord();"
wnd.Buttons.Add(btn)
btn = New Ext.Net.Button
btn.ID = "btnCancel"
btn.Text = "Cancel"
btn.TextAlign=ButtonTextAlign.Center
btn.Icon = Icon.Cancel
btn.OnClientClick = wnd.ClientID & ".close();"
wnd.Buttons.Add(btn)
Return wnd
End Function
</script>
<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
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
Ext.Net.X.Js.Call("parent.Ext.net.DirectMethods.ShowWindow", "Details Window!!!", recordID)
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>
</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()
Dim mb As New Ext.Net.MessageBox
mb.Alert("Save method as called!!!!", "Save method as called in TEST21.aspx PAGE!!!!")
mb.Show()
'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>
Last edited by Daniil; Mar 13, 2012 at 5:43 PM.
Reason: [CLOSED]