[CLOSED] Help on architecture

  1. #1

    [CLOSED] Help on architecture

    I have a view port with this structure:

    North-> Main Menu
    West-> Context Menu
    Center-> Form Panel detail
    South -> Grid Panel
    The form panel and the grid must be loaded dynamically based on the selection made on the menu in the west region.

    What do you advise me to use?

    User control?
    Last edited by geoffrey.mcgill; Oct 07, 2010 at 7:55 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Seems the details that you provided are not enough to choose the best solution.

    You could either use a Master page technique or user controls or custom controls or just place the whole markup and code in a one page.

    Could you provide more details about requirements of your application?
  3. #3
    I have already created a structure like the one I described.
    I used the panels in which loads pages aspx.(GestioneMenu)

    Frames have given me many problems.
    You can do the same thing using masterpage?

    I am attaching the code and screenshots


    
     protected void GestioneMenu(object sender, Ext.Net.DirectEventArgs e)
            {
                //Session.Remove("Ready"); 
                foreach (Control control in WestPanel.Controls[0].Controls)
                {
                    if (control is Ext.Net.LinkButton)
                    {
                        Ext.Net.LinkButton og = (Ext.Net.LinkButton)control;
                        og.RemoveClass("miab");
                        og.AddClass("mia");
                        og.Text = og.Text.Replace(" ", "");
                    }
                }
                Ext.Net.LinkButton lb = (Ext.Net.LinkButton)(sender);
                lb.Text = " " + lb.Text;
                lb.AddClass("miab");
    
    
                PanelGrid.SetTitle(e.ExtraParams["Title"]);
                PanelGrid.AutoLoad.Url = e.ExtraParams["Entity"] + "/Grid.aspx";
                PanelGrid.AutoLoad.Mode = LoadMode.IFrame;
                PanelGrid.AutoLoad.NoCache = true;
                PanelGrid.LoadContent();
    
    
                PanelDetail.AutoLoad.Url = e.ExtraParams["Entity"] + "/Form.aspx";
                PanelDetail.AutoLoad.Mode = LoadMode.IFrame;
                PanelDetail.AutoLoad.NoCache = true;
                PanelDetail.LoadContent();
    
              
            }
    
    
    
    
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WAY.Accise._Default" %>
    <%@ 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 id="Head1" runat="server" enableviewstate="false">
      <script type="text/javascript" language="javascript" src="<%#GetWAYResource("JS/Common/WAYMenu.js?version=WAYaccise_v1") %>"></script>
        <title>WAY - Accise</title>
         <link href="Css/StyleSheet.css" rel="Stylesheet" type="text/css" />
         <link rel="Stylesheet" type="text/css" href="<%#GetWAYResource("CSS/environmentMenu.css") %>" />     
        <ext:XScript ID="XScript1" runat="server" EnableViewState="false">
            <script type="text/javascript">
                var Ridimensiona = function() {
                    if (parent.PanelGrid.getBody().PagingToolBar != undefined) {
                        PanelGrid.body.mask("Caricamento in corso...", "x-mask-loading");
                        var p = roundTo(((PanelGrid.getHeight() - 115) / 24) + (PanelGrid.getHeight() * 0.0026), 0);
                        var h = PanelGrid.getHeight() - 27;
                        parent.PanelGrid.getBody().PagingToolBar.pageSize = p;
                        parent.PanelGrid.getBody().GridPanel.setHeight(h);
                        parent.PanelGrid.getBody().PagingToolBar.doLoad(0);
                        PanelGrid.body.unmask();
                    }
                }
                function roundTo(value, decimalpositions) {
                    var i = value * Math.pow(10, decimalpositions);
                    i = Math.floor(i);
                    return i / Math.pow(10, decimalpositions);
                }
    
                var addMenu = function(pnl) {
                
                    var menu = new Ext.Toolbar({ items: WAYMenu.CreateEnvironmentMenu(environmentMenu, 'DATAENTRY'), cls: 'EnvironmentMenu' });
                    pnl.add(menu);
                    pnl.doLayout();
                }
    
                var addMenus = function(pnl) {
                
                    pnl.add(WAYMenu.CreateSubMenu(currentEnvironmentMenu, true));
                    pnl.doLayout();
                }
                
                </script>
        </ext:XScript>  
        <style type="text/css">
            .add32 {
                background-image: url(images/add32.gif) !important;
            }
            .add16 {
                background-image: url(images/add16.gif) !important;
            }
            .add24 {
                background-image: url(images/add24.gif) !important;
            }
        </style>    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />    
        <ext:Viewport ID="ViewPort1" runat="server">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North Split="false" Collapsible="false" >
                       <ext:Panel ID="Panel1"
                            Height="50"
                            runat="server" 
                            TitleCollapse="true"
                            Layout="fit">
                                <Listeners>
                                    <BeforeRender Fn="addMenu" />
                                 </Listeners>                               
                             </ext:Panel>
                    </North>
                    <West MinWidth="170" MaxWidth="400" Split="true" Collapsible="true">                
                        <ext:Panel 
                            ID="WestPanel" 
                            runat="server" 
                            Title="Elementi"
                            Width="170"
                            BodyStyle="padding:0px;">
                            <Content>
                                <table cellspacing="0" cellpadding="0" class="tables" border="0">
                                    <tbody>
                                        <tr>
                                            <td colspan="2" style="height:30px;">
                                                <ext:LinkButton ID="LinkButton_Anagrafica_Flotte" 
                                                     runat="server"
                                                     Cls="mia"            
                                                     Text="Macchine Operatrici">
                                                     <DirectEvents>
                                                        <Click OnEvent="GestioneMenu">               
                                                        <ExtraParams>
                                                            <ext:Parameter Name="Entity" Value="MacchineOperatrici" /> 
                                                            <ext:Parameter Name="Title" Value="Macchine Operatrici" />                    
                                                        </ExtraParams>
                                                        </Click>
                                                     </DirectEvents>                                                                                             
                                                </ext:LinkButton>
                                            </td>
                                        </tr>
                                        <tr>
                                        <td colspan="2" style="height:30px;">
                                    <ext:LinkButton ID="LinkButton1" 
                                         runat="server"
                                         Cls="mia"            
                                         Text="Motori">
                                         <DirectEvents>
                                            <Click OnEvent="GestioneMenu">               
                                            <ExtraParams>
                                                <ext:Parameter Name="Entity" Value="Motori" />  
                                                <ext:Parameter Name="Title" Value="Motori" />                       
                                            </ExtraParams>
                                            </Click>
                                         </DirectEvents>                                      
                                    </ext:LinkButton>
                                    </td>
        </tr>    
        <tr>
            <td colspan="2" style="height:30px;">
            <ext:LinkButton ID="LinkButton2" 
                 runat="server"
                 Cls="mia"            
                 Text="Siti Operativi">
                 <DirectEvents>
                    <Click OnEvent="GestioneMenu">               
                    <ExtraParams>
                        <ext:Parameter Name="Entity" Value="Siti" />                     
                    </ExtraParams>
                    </Click>
                 </DirectEvents> 
            </ext:LinkButton>      
            </td>
        </tr>
            
        </tbody>
     </table>
     </Content></ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel 
                            ID="PanelDetail" 
                            runat="server" 
                            Height="150" 
                            Padding="10" 
                            AutoScroll="false"
                            Width="350"
                            Title="Dettaglio">
                            <AutoLoad Mode="IFrame" ShowMask="true" MaskMsg="Caricamento in corso..." NoCache="true">              
                            </AutoLoad>                       
                        </ext:Panel>
                    </Center>
                 
                    <South Split="true" Collapsible="true">
                        <ext:Panel 
                            ID="PanelGrid" 
                            runat="server"
                            Title="Elenco" 
                            Height="250"
                            Padding="0">
                            <AutoLoad Mode="IFrame" ShowMask="true" MaskMsg="Caricamento in corso..."  />
                            <Listeners>                        
                                    <Resize Handler="Ridimensiona();"> </Resize>                               
                            </Listeners>           
                        </ext:Panel>
                    </South>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Attached Thumbnails macchine.jpg   Motori.jpg   sito.jpg  
  4. #4
    Hi,

    Please clarify what exactly problems do you have with frames?

    A configuration with master page can look something like this:

    Master Page
    <%@ Master Language="C#" %>
    
    <%@ 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 Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:Panel runat="server" Title="Center" Region="Center">
                    <Content>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolderCenter" runat="server" />
                    </Content>
                </ext:Panel>
                
                <ext:Panel runat="server" Title="South" Region="South" Height="100">
                    <Content>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolderSouth" runat="server" />
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="~/Master.Master" %>
    
    <%@ Register Src="~/User controls/Center.ascx" TagPrefix="uc" TagName="Center" %>
    <%@ Register Src="~/User controls/South.ascx" TagPrefix="uc" TagName="South" %>
    <asp:Content ID="ContentCenter" ContentPlaceHolderID="ContentPlaceHolderCenter" runat="server">
        <uc:Center runat="server" />
    </asp:Content>
    <asp:Content ID="ContentSouth" ContentPlaceHolderID="ContentPlaceHolderSouth" runat="server">
        <uc:South runat="server" />
    </asp:Content>
    Center.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void ButtonClick(object sender, DirectEventArgs e)
        {
            X.GetCmp<DisplayField>("DisplayFieldSouth").Text = "Hello from Center user control";
        }
        
    </script>
    
    <ext:FitLayout runat="server">
        <Items>
            <ext:Container runat="server">
                <Items>
                    <ext:Button runat="server" Text="Click me" OnDirectClick="ButtonClick" />
                </Items>
            </ext:Container>
        </Items>
    </ext:FitLayout>
    South.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Container runat="server">
                <Items>
                    <ext:DisplayField ID="DisplayFieldSouth" runat="server" Text="South" />
                </Items>
            </ext:Container>
        </Items>
    </ext:FitLayout>
    I would suggest you to avoid using core html markup for layout managing purpose. Using respective layout managers would give you many benefits like cross-browser compatibility, resizable, scrollable, etc.
  5. #5
    Ok Daniil
    I like your solution
    In the central region of the contents must be changed at runtime.
    In my previous solution load aspx pages in this mode

     PanelDetail.AutoLoad.Url = e.ExtraParams["Entity"] + "/Form.aspx"; 
    PanelDetail.AutoLoad.Mode = LoadMode.IFrame; 
    PanelDetail.AutoLoad.NoCache = true; 
    PanelDetail.LoadContent();
    With your solution as I do that?
  6. #6
    Please use LoadControl() method.

    Master Page
    <%@ Master Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Control centerUserControl = LoadControl("~/User controls/Center.ascx");
            ContainerCenter.Controls.Add(centerUserControl);
        }    
    </script>
    
    <!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 Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Container ID="ContainerCenter" runat="server" Region="Center" />
                <ext:Panel runat="server" Title="South" Region="South" Height="100">
                    <Content>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolderSouth" runat="server" />
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="~/Master.Master" %>
    
    <%@ Register Src="~/User controls/South.ascx" TagPrefix="uc" TagName="South" %>
    
    <asp:Content ID="ContentSouth" ContentPlaceHolderID="ContentPlaceHolderSouth" runat="server">
        <uc:South runat="server" />
    </asp:Content>
    Center.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void ButtonClick(object sender, DirectEventArgs e)
        {
            X.GetCmp<DisplayField>("DisplayFieldSouth").Text = "Hello from Center user control";
        }
        
    </script>
    
    <ext:Panel runat="server" Title="Center" Height="300">
        <Items>
            <ext:Button runat="server" Text="Click me" OnDirectClick="ButtonClick" />
        </Items>
    </ext:Panel>
    South.ascx is the same as previous one
  7. #7
    Hello Daniil
    I must apologize to you
    We changed the architecture
    Now the solution is this:

    Menu left with tab like:
    http://examples1.ext.net/#/TabPanel/Basic/Add_Tabs/

    For each selection will open a form details like
    http://examples1.ext.net/#/GridPanel.../Form_Details/

    How should I organize my project?

    Can I have an aspx page for each tab?
    You seem a good solution?
  8. #8
    Hi,

    How should I organize my project?
    You could use either user controls or frames.


    Can I have an aspx page for each tab?
    You seem a good solution?
    Yes, you can. The same way as here
    http://examples1.ext.net/#/TabPanel/Basic/Add_Tabs/

    I think it's a much better solution then placing all code and markup on one page.
    As for me it's better than user controls also. Just more accustomed.

Similar Threads

  1. Replies: 1
    Last Post: Jan 31, 2011, 12:40 PM
  2. Ideas on enterprise application architecture with Coolite/ExtJS
    By thedarklord in forum Open Discussions
    Replies: 1
    Last Post: May 24, 2010, 11:02 AM

Posting Permissions