PDA

View Full Version : [CLOSED] Layout issues



Daly_AF
Aug 02, 2012, 3:02 PM
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;
}

}
}

Daniil
Aug 02, 2012, 4:23 PM
Hi,

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

Daly_AF
Aug 02, 2012, 7:31 PM
Hi again I reproduced the issue within a new project, this is the link Project (https://downloads.sourceforge.net/project/testprojectextn/testproject/TestProject.rar?r=&ts=1343935789&use_mirror=master) to download the project

PS: Project uploaded without Ext.Net Dll's.

Daniil
Aug 02, 2012, 7:34 PM
I am afraid you have missed that comment:

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

geoffrey.mcgill
Aug 02, 2012, 7:43 PM
Hi again I reproduced the issue within a new project, this is the link Project (https://downloads.sourceforge.net/project/testprojectextn/testproject/TestProject.rar?r=&ts=1343935789&use_mirror=master) 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.

Daly_AF
Aug 03, 2012, 8:18 AM
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

Daniil
Aug 03, 2012, 11:08 AM
Please replace

mode: 'iframe'
with

renderer: 'frame'
within the addTab function.

Daly_AF
Aug 03, 2012, 11:29 AM
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.

Daniil
Aug 03, 2012, 12:20 PM
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.

Daly_AF
Aug 03, 2012, 1:04 PM
It works thank you