[CLOSED] Layout issues

  1. #1

    [CLOSED] Layout issues

    Hi,
    I implemented a template that looks to the Ext.NET MVC layout I had some issues this is the code below :
    Site.Master Code under shared folder :
    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="WestMenu.ascx" TagName="WestMenu" TagPrefix="uc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
    Ext.ns("ACP");
    
    ACP = {
        hashCode: function (str) {
            var hash = 1315423911;
            for (var i = 0; i < str.length; i++) {
                hash ^= ((hash << 5) + str.charCodeAt(i) + (hash >> 2));
            }
    
            return (hash & 0x7FFFFFFF);
        },
    
        addTab: function (config) {
            if (Ext.isEmpty(config.url, false)) {
                return;
            }
    
            var tp = Ext.getCmp('tpMain');
            var id = this.hashCode(config.url);
            var tab = tp.getComponent(id);
            if (!tab) {
                tab = tp.addTab({
                    id: id.toString(),
                    title: config.title,
                    iconCls: config.icon || 'icon-applicationdouble',
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        url: config.url,
                        mode: 'iframe',
                        noCache: true,
                        maskMsg: "Loading '" + config.title + "'...",
                        scripts: true,
                        passParentSize: config.passParentSize
                    }
                });
            } else {
                tp.setActiveTab(tab);
                Ext.get(tab.tabEl).frame();
            }
        }
    };
        </script>
    <style type="text/css">
            body {
        font : normal 12px tahoma, arial, verdana;
    }
    
    .white-menu .x-menu {
        background : white !important;
    }
    
    .x-window-mc {
        background-color : #F4F4F4 !important;
    }
    
    .title-label{
      color:black;
    }
    
    .x-theme-slate .title-label{
      color:white;
    }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="_rsm" runat="server" IDMode="Static">
        </ext:ResourceManager>
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="_pnl" runat="server" Layout="FitLayout" Width="250" Region="West"
                    Collapsible="true">
                    <Content>
                        <uc1:WestMenu runat="server" ID="_west" />
                    </Content>
                </ext:Panel>
                <ext:TabPanel ID="tpMain" runat="server" Region="Center" Margins="0 0 4 0" IDMode="Static"
                    EnableTabScroll="true">
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    This is the WestMenu ASCX code under shared folder:
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:MenuPanel ID="acReports" runat="server" Border="false" SaveSelection="false"
        Cls="white-menu" Collapsed="false">
        <Menu runat="server">
            <Items>
                <ext:MenuItem runat="server" Text="Search">
                    <CustomConfig>
                        <ext:ConfigItem Name="url" Value="/Test/Test/" Mode="Value" />
                    </CustomConfig>
                </ext:MenuItem>
            </Items>
            <Listeners>
                <Click Handler="ACP.addTab({ title: menuItem.text, url: menuItem.url, icon: menuItem.iconCls, passParentSize: menuItem.passParentSize});">
                </Click>
            </Listeners>
        </Menu>
    </ext:MenuPanel>
    This is the grid partial view code under Test folder view:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Panel ID="_gridPnl" Border="false" Header="false" runat="server">
        <Loader ID="Loader1" AutoLoad="true" runat="server" Url="/Test/LoadGridPnl"
            DisableCaching="true" Mode="Html" Scripts="true" RemoveAll="true">
            <Params>
                <ext:Parameter Name="containerID" Value="App._gridPnl" Mode="Value" />
            </Params>
        </Loader>
    </ext:Panel>
    This is the search formpanel code under Test folder view:
    
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ 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">
        <script type="text/javascript">
            var onClick = function () {
                App._pnlPartial.load(
                        {
                            url: "/Test/GetSearchGrid",
                            params:
                            {
                                'containerID': '_pnlPartial'
                            },
                            scripts: true
                        });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <form id="_formGridSearch" runat="server">
        </form>
        <ext:Viewport runat="server" Layout="BorderLayout" AutoScroll="true">
            <Items>
                <ext:Panel ID="_pnlCptySearchView" runat="server" Border="false" Header="false" Region="North">
                    <Loader ID="Loader2" runat="server" Url="/Test/LoadFP" DisableCaching="true" Scripts="true"
                        Mode="Html">
                        <Params>
                            <ext:Parameter Name="containerID" Value="App._pnlCptySearchView" Mode="Value" />
                        </Params>
                    </Loader>
                </ext:Panel>
                <ext:Panel runat="server" ID="_pnlCenter" Border="false" Header="false" Region="Center">
                </ext:Panel>
                <ext:Panel ID="_pnlPartial" runat="server" Border="false" Header="false" Region="South">
                    <Loader ID="Loader1" runat="server" AutoLoad="false" Mode="Component" RemoveAll="true" />
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    This the controller Code :
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net.MVC;
    using Ext.Net;
    
    namespace Presentation.Controllers
    {
        public class Test
        {
            public Test(int id, String test)
            {
                this.Id = id;
                this.test = test;
            }
    
            int id;
    
            public int Id
            {
                get { return id; }
                set { id = value; }
            }
            String test;
    
            public String Test1
            {
                get { return test; }
                set { test = value; }
            }
        }
    
        public class TestController : System.Web.Mvc.Controller
        {
            public ActionResult Test()
            {
                return View();
            }
    
            public ContentResult GetSearchGrid(String containerID)
            {
                return Content(Ext.Net.ComponentLoader.ToConfig("~/Views/Test/GetSearchGrid.ascx"));
            }
    
            public StoreResult GetData()
            {
                List<Test> lists = new List<Test>();
                StoreResult result = new StoreResult();
                for (int i = 0; i < 50; i++)
                {
                    lists.Add(new Test(i, "test" + i.ToString()));
                }
                result.Data = lists;
                return result;
            }
    
            public GridPanel GenerateSearchGridPnl()
            {
                GridPanel gridPanel = new GridPanel();
                gridPanel.ID = "_grid";
                gridPanel.AutoHeight = true;
                Store store = new Store();
                store.ID = "_store";
                JsonReader js = new JsonReader();
                js.Root = "data";
                AjaxProxy ajax = new AjaxProxy();
                ajax.Reader.Add(js);
                ajax.Url = "/Test/GetData";
                ajax.ActionMethods.Read = HttpMethod.POST;
                store.Proxy.Add(ajax);
                Model model = new Model();
                ModelField mf0 = new ModelField();
                mf0.Name = "Id";
                mf0.Type = ModelFieldType.Int;
                ModelField mf1 = new ModelField();
                mf1.Name = "Test1";
                mf1.Type = ModelFieldType.String;
                model.Fields.Add(mf0);
                model.Fields.Add(mf1);
                store.Model.Add(model);
                gridPanel.Store.Add(store);
                Column c0 = new Column();
                c0.Text = "Id";
                c0.DataIndex = "Id";
                Column c1 = new Column();
                c1.Text = "Test1";
                c1.DataIndex = "Test1";
                gridPanel.ColumnModel.Columns.Add(c0);
                gridPanel.ColumnModel.Columns.Add(c1);
                return gridPanel;
            }
    
            public FormPanel GenerateFP()
            {
                FormPanel fp = new FormPanel();
                fp.Padding = 10;
                fp.Border = false;
                FieldSet fs = new FieldSet();
                fs.Collapsible = true;
                fs.Title = "FS";
                Button btn = new Button();
                btn.Text = "Search";
                btn.Listeners.Click.Handler = "onClick();";
                fp.Buttons.Add(btn);
                fp.ButtonAlign = Alignment.Center;
                fs.Layout = "HBoxLayout";
                Panel panelLeft = new Panel();
                panelLeft.Border = false;
                panelLeft.Layout = "AnchorLayout";
                panelLeft.Flex = 1;
                Panel panelCenter = new Panel();
                panelCenter.Border = false;
                panelCenter.Layout = "AnchorLayout";
                panelCenter.Flex = 1;
                panelCenter.Add(GenerateCom());
                panelLeft.Add(GenerateCom());
                fs.Items.Add(panelLeft);
                fs.Items.Add(panelCenter);
                fp.Items.Add(fs);
                return fp;
            }
    
            public Panel GenerateCom()
            {
                Panel p = new Panel();
                p.Border = false;
                p.Layout = "AnchorLayout";
                p.Padding = 1;
                p.Items.Add(new TextField());
                return p;
            }
    
    
            public ContentResult LoadFP(String containerID)
            {
                ContentResult cr = new ContentResult();
                String fp = GenerateFP()
                    .ToScript(
                    RenderMode.AddTo,
                    containerID);
                cr.Content = string.Format("<script>{0}</script>", fp);
                return cr;
            }
    
            public ContentResult LoadGridPnl(String containerID)
            {
                ContentResult cr = new ContentResult();
                String gridPanel = GenerateSearchGridPnl()
                    .ToScript(
                    RenderMode.AddTo,
                    containerID);
                cr.Content = string.Format("<script>{0}</script>", gridPanel);
                return cr;
            }
    
        }
    }
    Last edited by Daniil; Aug 03, 2012 at 1:23 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I can't see any details about the issues. Please provide.
  3. #3
    Hi again I reproduced the issue within a new project, this is the link Project to download the project

    PS: Project uploaded without Ext.Net Dll's.
  4. #4
    I am afraid you have missed that comment:
    Quote Originally Posted by Daniil View Post
    I can't see any details about the issues. Please provide.
  5. #5
    Quote Originally Posted by Daly_AF View Post
    Hi again I reproduced the issue within a new project, this is the link Project to download the project

    PS: Project uploaded without Ext.Net Dll's.
    You have provided a code sample, but no explanation of the problem.

    As well, please only post code samples in the forums as plain text, and wrapping code samples in [CODE] tags. This will help us to easily visually scan the code sample and provide search engine indexing.
    Geoffrey McGill
    Founder
  6. #6
    Quote Originally Posted by Daniil View Post
    Hi,

    I can't see any details about the issues. Please provide.
    Hi Daniil,

    My problem is that when clicking on Search the rendered screen looses the layout of master page.
    Hope my problem is more clear now
  7. #7
    Please replace
    mode: 'iframe'
    with
    renderer: 'frame'
    within the addTab function.
  8. #8
    Quote Originally Posted by Daniil View Post
    Please replace
    mode: 'iframe'
    with
    renderer: 'frame'
    within the addTab function.
    The layout issue is fixed but when I click on the search button the gridpanel is not fully rendred.
  9. #9
    I would apply the following changes.

    Test.aspx

    1. Set up
    Layout="BorderLayout"
    for the Viewport.

    2. Set up
    Height="120"
    for the _pnlCptySearchView.

    3. Replace
    Region="South"
    with
    Region="Center"
    for the _pnlPartial.

    4. Set up
    Layout="FitLayout"
    for the _pnlPartial.


    GetSearchGrid.ascx

    1. Set up
    Layout="FitLayout"
    for the _gridPnl.
  10. #10
    It works thank you

Similar Threads

  1. [CLOSED] More Layout Issues
    By FAS in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2012, 7:20 PM
  2. [CLOSED] Ipad 3 layout issues
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 21, 2012, 11:22 AM
  3. [CLOSED] Layout issues
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 25, 2010, 2:25 PM
  4. [CLOSED] [1.0] iFrame and IE7 layout issues
    By betamax in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 01, 2010, 2:00 PM
  5. [CLOSED] [1.0] Having layout issues in ie8 only
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2010, 5:18 AM

Posting Permissions