Mar 25, 2011, 3:12 PM
Layout problems with GridPanel and other stuff - resources for learning layouting in EXT.NET?
Hey,
I have a Layout problem. I have a specific case in front of me, but I think this is a general problem. I cant seem to understand how to Layout correctly, to get the expected behaviour.
But to be specific:
I have a page with a ViewPort, West and Center. They have a slitter between then, so you can resize the areas.
In West, I have:
- one ComboBox on top that is supposed to extend its width to the width of its Container, ie to the width of West
- one GridPanel below ComboBox that is supposed to extend its width to the width of its Container, ie to the width of West AND extend downwards all the way.
What I found out was that IF I place everything in one page (no Master page) the Controls will resize if you resize any of the ViewPort-panels. But if you use a Master page, like below, and place the ComboBox in the "West"-region in the page, the ComboBox will NOT resize or "fill" the width.
So two cases, case nbr 1: Everything in one file, works with resize:
Case nbr 2: With MasterPage, resize does not work:
Im still having problems with layout in ext.net. It seems very very hard to have panels or such taht adapts to the size of its previous container.
For example, I want two form sets, sharing the size of the container by some percentage:
+----------------------------+-------------------------+
| | |
| | |
| FORM 1 | FORM 2 |
| | |
| | |
+----------------------------+-------------------------+
I tried a TableLayout and inside that two FormPanels, but I cannot get the first TableLayout to strech 100% and then for each of the Cells take up X% of width. I can also not force it to expand to take up 100% height.
Is there any resource that explains this in a good way, except what is found on https://examples2.ext.net/ ?
I have a Layout problem. I have a specific case in front of me, but I think this is a general problem. I cant seem to understand how to Layout correctly, to get the expected behaviour.
But to be specific:
I have a page with a ViewPort, West and Center. They have a slitter between then, so you can resize the areas.
In West, I have:
- one ComboBox on top that is supposed to extend its width to the width of its Container, ie to the width of West
- one GridPanel below ComboBox that is supposed to extend its width to the width of its Container, ie to the width of West AND extend downwards all the way.
What I found out was that IF I place everything in one page (no Master page) the Controls will resize if you resize any of the ViewPort-panels. But if you use a Master page, like below, and place the ComboBox in the "West"-region in the page, the ComboBox will NOT resize or "fill" the width.
So two cases, case nbr 1: Everything in one file, works with resize:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="View.master.cs" Inherits="WebApplicationExtNetTest.Secure.Views.View" %>
<%@ 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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel_west" runat="server" Collapsible="false" Layout="Fit" Region="West" Split="true" Title="West" Width="300" Padding="5">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="costPlaceName" ValueField="costPlaceId"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel_center" runat="server" Layout="Fit" Region="Center" Title="Center" Padding="5">
<Items>
<ext:ComboBox ID="ComboBox2" runat="server" DisplayField="costPlaceName" ValueField="costPlaceId"></ext:ComboBox>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Store ID="Store_AvailableCustomers" runat="server" AutoDataBind="true" AutoLoad="true" >
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="CustomerId" />
<ext:RecordField Name="FirstName" />
<ext:RecordField Name="LastName" />
<ext:RecordField Name="PhoneNbr" />
<ext:RecordField Name="NbrOfLegs" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Store ID="Store_AvailableCostPlaces" runat="server" AutoDataBind="true" AutoLoad="true" >
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="CostPlaceId" />
<ext:RecordField Name="CostPlaceName" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</form>
</body>
</html>Case nbr 2: With MasterPage, resize does not work:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="View.master.cs" Inherits="WebApplicationExtNetTest.Secure.Views.View" %>
<%@ 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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel_west" runat="server" Collapsible="false" Layout="Fit" Region="West" Split="true" Title="West" Width="300" Padding="5">
<Content>
<asp:ContentPlaceHolder runat="server" ID="CPH_west"></asp:ContentPlaceHolder>
</Content>
</ext:Panel>
<ext:Panel ID="Panel_center" runat="server" Layout="Fit" Region="Center" Title="Center" Padding="5">
<Content>
<asp:ContentPlaceHolder runat="server" ID="CPH_center"></asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html><%@ Page Title="" Language="C#" MasterPageFile="~/Secure/Views/View.Master" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="WebApplicationExtNetTest.Secure.Views.Test2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_center" runat="server">
asdC
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_west" runat="server">
<ext:Panel Layout="Fit" runat="server">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="costPlaceName" ValueField="costPlaceId"></ext:ComboBox>
</Items>
</ext:Panel>
</asp:Content>Im still having problems with layout in ext.net. It seems very very hard to have panels or such taht adapts to the size of its previous container.
For example, I want two form sets, sharing the size of the container by some percentage:
+----------------------------+-------------------------+
| | |
| | |
| FORM 1 | FORM 2 |
| | |
| | |
+----------------------------+-------------------------+
I tried a TableLayout and inside that two FormPanels, but I cannot get the first TableLayout to strech 100% and then for each of the Cells take up X% of width. I can also not force it to expand to take up 100% height.
Is there any resource that explains this in a good way, except what is found on https://examples2.ext.net/ ?
Last edited by wagger; Mar 27, 2011 at 6:19 PM.
