Aug 02, 2012, 3:02 PM
[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 :
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]