Forcing panel layout inside menu

[cmv]

I'm creating an element in code-behind like so:

[ParseChildren(ChildrenAsProperties=true)]
public class MarkdownTextArea : Panel
{
	protected override void OnInit(EventArgs e)
	{
		this.Border = false;
		this.Layout = "FitLayout";

		this.Items.Add(new TextArea
		{
			ID = "MDArea",
			IDMode = Ext.Net.IDMode.Explicit,
			ClientIDMode = System.Web.UI.ClientIDMode.Static,
			AllowBlank = false,
			MinLength = 10,
			MinLengthText = this.MinLengthText,
			EmptyText = this.MinLengthText
		});

		Toolbar toolbar = new Toolbar();

		AddSnippetButton(toolbar);

		this.TopBar.Add(toolbar);

		base.OnInit(e);
	}

	private void AddSnippetButton(Toolbar toolbar)
	{
		Button snippetButton = new Button
		{
			ToolTip = "Insert a snippet",
			Icon = Icon.Comment,
		};

		Menu snippetMenu = new Menu();

		long id = 1;

		Panel snippetPanel = CreateSnippetPanel(id);

		snippetMenu.Items.Add(snippetPanel);
		snippetButton.Menu.Add(snippetMenu);
			
		toolbar.Items.Add(snippetButton);
	}

	private Panel CreateSnippetPanel(long idFor)
	{
		Panel p = new Panel();

		p.IDMode = Ext.Net.IDMode.Explicit;
		p.ID = ID + "_SnippetPicker";
		p.Width = 600;
		p.Height = 250;
		p.Title = "Select a snippet";
		p.Layout = "AnchorLayout";

		ColumnLayout layout = new ColumnLayout();

		LayoutColumn left = new LayoutColumn
		{
			ColumnWidth = 0.45M
		};

		left.Items.Add(new MyCustomTreeGrid
		{
			ID = ID + "_SnippetGrid",
			IDMode = Ext.Net.IDMode.Explicit,
			RootEntityId = idFor,
			RootEntityText = "Snippets",
		});

		layout.Columns.Add(left);

		LayoutColumn right = new LayoutColumn
		{
			ColumnWidth = 0.55M
		};

		right.Items.Add(new DisplayField
		{
			Text = "test",
		});
		
		layout.Columns.Add(right);
		layout.Split = true;

		p.Items.Add(layout);

		return p;
	}
}

The idea is that you click the menu button and the column layout panel is displayed there. When I click the menu button only the left panel with the TreePanel control is shown and it has not been initialized (i.e. the nodes have not been loaded). I tried setting ForceLayout=true on the panel inside CreateSnippetPanel but it does not seem to have had any effect.

[geoffrey.mcgill]

There might be a few things going wrong in there, but the first thing I noticed was the use of Layout Controls and setting .Layout property.

In your CreateSnippetPanel Method, you set p.Layout = "AnchorLayout"; then near the bottom you add p.Items.Add(layout);.

Those two statements cannot be used at the same time. You're setting two Layouts on the same Panel.

I would highly recommend not using the Layout Controls, as they have been discontinued in Ext.NET 2. Just set the .Layout property of 'p', and add the child Components directly into the .Items Collection of 'p'. No need to create the Layout Control.

Maybe fix that issue, then re-post your code sample and we'll take a look from there.

Hope this helps.

[cmv]

I have reduced that method to:

		private Panel CreateSnippetPanel(db2.www.entity ent)
		{
			Panel p = new Panel();

			p.IDMode = Ext.Net.IDMode.Explicit;
			p.ID = ID + "_SnippetPicker";
			p.Width = 600;
			p.Height = 250;
			p.Title = "Select a snippet";
			p.Layout = "ColumnLayout";

			p.Items.Add(new MyCustomTreeGrid
			{
				ID = ID + "_SnippetGrid",
				IDMode = Ext.Net.IDMode.Explicit,
				RootEntityId = idFor,
				RootEntityText = "Snippets",
			});

			p.Items.Add(new DisplayField
			{
				Text = "test",
				ColumnWidth = 0.55
			});

			return p;
		}

But I get the same result as before.

[geoffrey.mcgill]

Your code appears correct.

http://forums.ext.net/showthread.php...ing-New-Topics

http://forums.ext.net/showthread.php...ation-Required

[cmv]

Please note that I am using Ext.Net 1.2.0 with MVC 2 - does that affect the control rendering/initialization lifecycle?

The below example shows how I am using the controls - two of them inside a FormPanel inserted into HTML, because I am integrating Ext.Net into an existing MVC application and can't yet change it to use a Viewport or etc. The layout in the example does occur as I expect, unlike in my actual project, however the TreeGrid does not initialize even though the nodes are sent to the client.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<%@ Register assembly="ExtMarkdownTextArea" namespace="ExtMarkdownTextArea.Controls" tagprefix="c" %>
 
<!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">
	<title>Example</title>

	<ext:ResourcePlaceHolder ID="extResourcePlaceHolder" runat="server" />
</head>
<body>
	<form id="Form1" runat="server">
		<ext:ResourceManager runat="server" DebugConsole="Ext" ScriptMode="Debug" RegisterAllResources="true" />
		 
		<ext:FormPanel runat="server" ID="ArticlePanel" Title="New article" Icon="PageWhite" Padding="5" MonitorValid="true" ButtonAlign="Center" LabelAlign="Right">
			<Items>
				<c:MarkdownTextArea runat="server" ID="Summary" Width="700" Height="500" FieldLabel="Summary" LabelAlign="Top" />

				<c:MarkdownTextArea runat="server" ID="FullText" Width="700" Height="500" FieldLabel="Article text" LabelAlign="Top" />
			</Items>

			<Buttons>
				<ext:Button runat="server" Text="Save" ID="SubmitButton" Icon="PageSave">
				</ext:Button>
			</Buttons>
		</ext:FormPanel>
	</form>
</body>
</html>

namespace ExtMarkdownTextArea.Controls
{
	[ParseChildren(ChildrenAsProperties = true)]
	public class MyCustomTreeGrid : TreeGrid
	{
		private dynamic Data
		{
			get
			{
				return new object[]
				{
					new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
					new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
					new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
					new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
					new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
					new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
					new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
					new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
					new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
					new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
					new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
					new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
					new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
					new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
					new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
					new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
					new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
					new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
					new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
					new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
					new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
					new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
					new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
					new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
					new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
					new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
					new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
					new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
					new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
				};
			}
		}

		protected override void OnInit(EventArgs e)
		{
			UseArrows = true;
			Animate = true;

			Columns.Add(new TreeGridColumn
			{
				Header = "Company",
				DataIndex = "company"
			});

			Columns.Add(new TreeGridColumn
			{
				Header = "Price",
				DataIndex = "price"
			});

			Columns.Add(new TreeGridColumn
			{
				Header = "Change",
				DataIndex = "change"
			});

			Columns.Add(new TreeGridColumn
			{
				Header = "Change",
				DataIndex = "pctChange"
			});

			Columns.Add(new TreeGridDateColumn
			{
				Header = "Last Updated",
				DataIndex = "lastChange"
			});

			TreeNode rootNode = new TreeNode();
			rootNode.Leaf = false;
			rootNode.CustomAttributes.Add(new ConfigItem("company", Data[0][0].ToString(), ParameterMode.Value));
			rootNode.CustomAttributes.Add(new ConfigItem("price", Data[0][1].ToString(), ParameterMode.Value));
			rootNode.CustomAttributes.Add(new ConfigItem("change", Data[0][2].ToString(), ParameterMode.Value));
			rootNode.CustomAttributes.Add(new ConfigItem("pctChange", Data[0][3].ToString(), ParameterMode.Value));
			rootNode.CustomAttributes.Add(new ConfigItem("lastChange", Data[0][4].ToString(), ParameterMode.Value));
			
			foreach(var d in Data)
			{
				TreeNode node = new TreeNode();
				node.Leaf = true;
				node.CustomAttributes.Add(new ConfigItem("company", d[0].ToString(), ParameterMode.Value));
				node.CustomAttributes.Add(new ConfigItem("price", d[1].ToString(), ParameterMode.Value));
				node.CustomAttributes.Add(new ConfigItem("change", d[2].ToString(), ParameterMode.Value));
				node.CustomAttributes.Add(new ConfigItem("pctChange", d[3].ToString(), ParameterMode.Value));
				node.CustomAttributes.Add(new ConfigItem("lastChange", d[4].ToString(), ParameterMode.Value));
				rootNode.Nodes.Add(node);
			}

			Root.Add(rootNode);

			base.OnInit(e);
		}
	}

	[ParseChildren(ChildrenAsProperties = true)]
	public class MarkdownTextArea : Panel
	{
		[PersistenceMode(PersistenceMode.Attribute)]
		[NotifyParentProperty(true)]
		public string MinLengthText { get; set; }

		protected override void OnInit(EventArgs e)
		{
			this.Border = false;
			this.Layout = "FitLayout";

			this.Items.Add(new TextArea
			{
				ID = this.ID + "_MDArea",
				IDMode = Ext.Net.IDMode.Explicit,
				ClientIDMode = System.Web.UI.ClientIDMode.Static,
				AllowBlank = false,
				MinLength = 10,
				MinLengthText = this.MinLengthText,
				EmptyText = this.MinLengthText
			});

			Toolbar toolbar = new Toolbar();

			AddSnippetButton(toolbar);

			this.TopBar.Add(toolbar);

			base.OnInit(e);
		}

		private void AddSnippetButton(Toolbar toolbar)
		{
			Button snippetButton = new Button
			{
				ToolTip = "Insert a snippet",
				Icon = Icon.Comment,
			};

			Menu snippetMenu = new Menu();

			Panel snippetPanel = CreateSnippetPanel();

			snippetMenu.Items.Add(snippetPanel);
			snippetButton.Menu.Add(snippetMenu);

			toolbar.Items.Add(snippetButton);
		}

		private Panel CreateSnippetPanel()
		{
			Panel p = new Panel();

			p.IDMode = Ext.Net.IDMode.Explicit;
			p.ID = ID + "_SnippetPicker";
			p.Width = 600;
			p.Height = 250;
			p.Title = "Select a snippet";
			p.Layout = "ColumnLayout";

			p.Items.Add(new MyCustomTreeGrid
			{
				ID = ID + "_SnippetGrid",
				IDMode = Ext.Net.IDMode.Explicit,
				ColumnWidth = 0.45
			});

			p.Items.Add(new DisplayField
			{
				Text = "test",
				ColumnWidth = 0.55
			});

			return p;
		}
	}
}

[cmv]

I ported that demo project to Ext.Net 2 and interestingly it works as I expect it to except the MyCustomTreeGrid (which is now a TreePanel in v2) does not scroll vertically or horizontally.