[CLOSED] GridPanel Layout with Masterpages

**sisa** · Aug 17, 2012, 2:58 PM

Good Evening
I got a Problem with a Grid Panel on a Page which has a Masterpage...
The Grid Panel wont fit the Viewport !

Here's the Masterpage

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="ViewPortMasterDetail.master.vb" Inherits="CUST.Roche.Import.View.ViewPortMasterDetail" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=1.5.0.0, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>
<!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>
    <link href="../css/Main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <%--Script Manager    --%>     
        <asp:ScriptManager ID="ScriptManagement" runat="server">
            <Scripts>
                <asp:ScriptReference Path="../js/Main.js" />
                <asp:ScriptReference Path="../js/Order.js" />
            </Scripts>
        </asp:ScriptManager>
        <%--Ressource Manager    --%>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
        <%--Language Stores--%>
        <ext:Store ID="LanguageStore" runat="server" SerializationMode="Complex">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="LanguageId" />
                        <ext:RecordField Name="Value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Viewport runat="server" Layout="Fit">
            <Items>
                <ext:Panel runat="server" Region="Center" Border="false" Padding="6" Layout="Fit">
                    <asp:Content>
                        <div>
                            <asp:ContentPlaceHolder ID="ContentMaster" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </asp:Content>
                </ext:Panel>
                <ext:Panel runat="server" Region="South" Split="true" Collapsible="true" Height="250" Padding="6" Layout="Fit">
                    <Content>
                        <div>
                            <asp:ContentPlaceHolder ID="ContentDetail" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

and this is the Page code with the Grid

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/View/RocheImport/masterPages/ViewPortMasterDetail.Master" CodeBehind="OrderList.aspx.vb" Inherits="CUST.Roche.Import.View.View.RocheImport.OrderList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--Order Store--%>
    <ext:Store runat="server" ID="storeOrder" SerializationMode="Complex">
        <Reader>
            <ext:JsonReader IDProperty="Id">
                <Fields>
                    <ext:RecordField Name="Id" Type="String" />
                    <ext:RecordField Name="OrderType" Type="String" />
                    <ext:RecordField Name="OrderState" Type="String" />
                    <ext:RecordField Name="OrderReference" Type="String" />
                    <ext:RecordField Name="VDL" Type="String" />
                    <ext:RecordField Name="VDLId" Type="String" />
                    <ext:RecordField Name="OrderingParty" Type="String" />
                    <ext:RecordField Name="OrderingPartyId" Type="String" />
                    <ext:RecordField Name="InvoiceReceiver" Type="String" />
                    <ext:RecordField Name="InvoiceReceiverId" Type="String" />
                    <ext:RecordField Name="PickUpDate" Type="Date" />
                    <ext:RecordField Name="EventCount" Type="Int" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <%--Filter Panel--%>
    <ext:Panel runat="server" ID="pnlFilter" Layout="Fit">
        <Items>
        </Items>
    </ext:Panel>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMaster" runat="server" >
    <%--Order Grid--%>
    <ext:GridPanel runat="server" ID="gridOrder" Layout="Fit" StoreID="storeOrder" AutoExpandColumn="OrderReference" >
        <ColumnModel>
            <Columns>
                <ext:Column ColumnID="colId" DataIndex="Id" Header="Id" Width="10" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="True" />
                <ext:Column ColumnID="colOrderType" DataIndex="OrderType" Header="<%$ Resources:CUSTRocheImport, OrderType %>" Width="125" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                <ext:Column ColumnID="colOrderState" DataIndex="OrderState" Header="<%$ Resources:CUSTRocheImport, OrderState %>" Width="125" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                <ext:Column ColumnID="colOrderReference" DataIndex="OrderReference" Header="<%$ Resources:CUSTRocheImport, OrderReference %>" Width="125" Editable="False" Hidden="False" Groupable="False" Sortable="true"
                            MenuDisabled="False" />
                <ext:Column ColumnID="colVDL" DataIndex="VDL" Header="<%$ Resources:CUSTRocheImport, VDL %>" Width="150" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                <ext:ImageCommandColumn Width="25">
                    <Commands>
                        <ext:ImageCommand Icon="UserEarth" CommandName="cmdShowVDL">
                            <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowVDL %>" />
                        </ext:ImageCommand>
                    </Commands>
                </ext:ImageCommandColumn>
                <ext:Column ColumnID="colOrderingParty" DataIndex="OrderingParty" Header="<%$ Resources:CUSTRocheImport, OrderingParty %>" Width="150" Editable="False" Hidden="False" Groupable="False" Sortable="False"
                            MenuDisabled="False" />
                <ext:ImageCommandColumn Width="25">
                    <Commands>
                        <ext:ImageCommand Icon="User" CommandName="cmdShowOrderingParty">
                            <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowOrderingParty %>" />
                        </ext:ImageCommand>
                    </Commands>
                </ext:ImageCommandColumn>
                <ext:Column ColumnID="colInvoiceReceiver" DataIndex="InvoiceReceiver" Header="<%$ Resources:CUSTRocheImport, InvoiceReceiver %>" Width="150" Editable="False" Hidden="False" Groupable="False" Sortable="False"
                            MenuDisabled="False" />
                <ext:ImageCommandColumn Width="25">
                    <Commands>
                        <ext:ImageCommand Icon="User" CommandName="cmdShowInvoiceReceiver">
                            <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowInvoiceReceiver %>" />
                        </ext:ImageCommand>
                    </Commands>
                </ext:ImageCommandColumn>
                <ext:DateColumn ColumnID="colPickUpDate" DataIndex="PickUpDate" Header="<%$ Resources:CUSTRocheImport, PickUpDate %>" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" />
                <ext:Column ColumnID="colEventCount" DataIndex="EventCount" Header="<%$ Resources:CUSTRocheImport, EventCount %>" Width="10" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="True" />
                <ext:ImageCommandColumn Width="25">
                    <Commands>
                        <ext:ImageCommand Icon="LightningGo" CommandName="cmdShowEvents">
                            <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowEvents %>" />
                        </ext:ImageCommand>
                    </Commands>
                    <PrepareCommand Fn="showEventLink" />
                </ext:ImageCommandColumn>
                <ext:ImageCommandColumn Width="25">
                    <Commands>
                        <ext:ImageCommand Icon="CartMagnify" CommandName="cmdShowOrder">
                            <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowOrder %>" />
                        </ext:ImageCommand>
                    </Commands>
                </ext:ImageCommandColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentDetail" runat="server">
</asp:Content>

Any hint what to do here ?

Peter

**Daniil** · Aug 17, 2012, 3:19 PM

Hi,

Please wrap the GridPanel in a FitLayout control.

**sisa** · Aug 18, 2012, 7:17 AM

Originally Posted by Daniil

Hi,

Please wrap the GridPanel in a FitLayout control.

I did what you mentioned. It ends in a error on a Ext.Net Class called Lifecycle.cs.
Line 508 :

        [Description("")]
        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            this.EnsureID();

            if (this is IContent)
            {
                this.Controls.Add(((IContent)this).ContentContainer);
            }
        }

Exception : The control collection cannot be modified during DataBind, Init, Load, PreRender or Unload phases.
Stacktrace :
at System.Web.UI.ControlCollection.Add(Control child)
at Ext.Net.XControl.CreateChildControls() in C:\Users\Geoffrey McGill\Documents\Visual Studio 2010\Projects\Ext.NET\v1\Ext.Net\Core\XControl\Lif ecycle.cs:line 508
at System.Web.UI.Control.EnsureChildControls()
at System.Web.UI.Control.FindControl(String id, Int32 pathOffset)
at System.Web.UI.Control.FindControl(String id)
at Ext.Net.Utilities.ControlUtils.FindChildControl(Co ntrol seed, String id)

Current Page Markup

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/View/RocheImport/masterPages/ViewPortMasterDetail.Master" CodeBehind="OrderList.aspx.vb" Inherits="CUST.Roche.Import.View.View.RocheImport.OrderList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--Order Store--%>
    <ext:Store runat="server" ID="storeOrder" SerializationMode="Complex">
        <Reader>
            <ext:JsonReader IDProperty="Id">
                <Fields>
                    <ext:RecordField Name="Id" Type="String" />
                    <ext:RecordField Name="OrderType" Type="String" />
                    <ext:RecordField Name="OrderState" Type="String" />
                    <ext:RecordField Name="OrderReference" Type="String" />
                    <ext:RecordField Name="VDL" Type="String" />
                    <ext:RecordField Name="VDLId" Type="String" />
                    <ext:RecordField Name="OrderingParty" Type="String" />
                    <ext:RecordField Name="OrderingPartyId" Type="String" />
                    <ext:RecordField Name="InvoiceReceiver" Type="String" />
                    <ext:RecordField Name="InvoiceReceiverId" Type="String" />
                    <ext:RecordField Name="PickUpDate" Type="Date" />
                    <ext:RecordField Name="EventCount" Type="Int" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <%--Filter Panel--%>
    <ext:Panel runat="server" ID="pnlFilter" Layout="Fit">
        <Items>
        </Items>
    </ext:Panel>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMaster" runat="server">
    <%--Order Grid--%>
    <ext:FitLayout runat="server">
        <Items>
            <ext:GridPanel runat="server" ID="gridOrder" Layout="Fit" StoreID="storeOrder" AutoExpandColumn="OrderReference">
                <ColumnModel>
                    <Columns>
                        <ext:Column ColumnID="colId" DataIndex="Id" Header="Id" Width="10" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <ext:Column ColumnID="colOrderType" DataIndex="OrderType" Header="<%$ Resources:CUSTRocheImport, OrderType %>" Width="125" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                        <ext:Column ColumnID="colOrderState" DataIndex="OrderState" Header="<%$ Resources:CUSTRocheImport, OrderState %>" Width="125" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                        <ext:Column ColumnID="colOrderReference" DataIndex="OrderReference" Header="<%$ Resources:CUSTRocheImport, OrderReference %>" Width="125" Editable="False" Hidden="False" Groupable="False" Sortable="true"
                            MenuDisabled="False" />
                        <ext:Column ColumnID="colVDL" DataIndex="VDL" Header="<%$ Resources:CUSTRocheImport, VDL %>" Width="150" Editable="False" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
                        <ext:ImageCommandColumn Width="25">
                            <Commands>
                                <ext:ImageCommand Icon="UserEarth" CommandName="cmdShowVDL">
                                    <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowVDL %>" />
                                </ext:ImageCommand>
                            </Commands>
                        </ext:ImageCommandColumn>
                        <ext:Column ColumnID="colOrderingParty" DataIndex="OrderingParty" Header="<%$ Resources:CUSTRocheImport, OrderingParty %>" Width="150" Editable="False" Hidden="False" Groupable="False" Sortable="False"
                            MenuDisabled="False" />
                        <ext:ImageCommandColumn Width="25">
                            <Commands>
                                <ext:ImageCommand Icon="User" CommandName="cmdShowOrderingParty">
                                    <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowOrderingParty %>" />
                                </ext:ImageCommand>
                            </Commands>
                        </ext:ImageCommandColumn>
                        <ext:Column ColumnID="colInvoiceReceiver" DataIndex="InvoiceReceiver" Header="<%$ Resources:CUSTRocheImport, InvoiceReceiver %>" Width="150" Editable="False" Hidden="False" Groupable="False" Sortable="False"
                            MenuDisabled="False" />
                        <ext:ImageCommandColumn Width="25">
                            <Commands>
                                <ext:ImageCommand Icon="User" CommandName="cmdShowInvoiceReceiver">
                                    <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowInvoiceReceiver %>" />
                                </ext:ImageCommand>
                            </Commands>
                        </ext:ImageCommandColumn>
                        <ext:DateColumn ColumnID="colPickUpDate" DataIndex="PickUpDate" Header="<%$ Resources:CUSTRocheImport, PickUpDate %>" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" />
                        <ext:Column ColumnID="colEventCount" DataIndex="EventCount" Header="<%$ Resources:CUSTRocheImport, EventCount %>" Width="10" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="True" />
                        <ext:ImageCommandColumn Width="25">
                            <Commands>
                                <ext:ImageCommand Icon="LightningGo" CommandName="cmdShowEvents">
                                    <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowEvents %>" />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="showEventLink" />
                        </ext:ImageCommandColumn>
                        <ext:ImageCommandColumn Width="25">
                            <Commands>
                                <ext:ImageCommand Icon="CartMagnify" CommandName="cmdShowOrder">
                                    <ToolTip Text="<%$ Resources:CUSTRocheImport, ShowOrder %>" />
                                </ext:ImageCommand>
                            </Commands>
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:FitLayout>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentDetail" runat="server">
</asp:Content>

Current Masterpage Markup

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="ViewPortMasterDetail.master.vb" Inherits="CUST.Roche.Import.View.ViewPortMasterDetail" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=1.5.0.0, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>
<!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>
    <link href="../css/Main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <%--Script Manager    --%>     
        <asp:ScriptManager ID="ScriptManagement" runat="server">
            <Scripts>
                <asp:ScriptReference Path="../js/Main.js" />
                <asp:ScriptReference Path="../js/Order.js" />
            </Scripts>
        </asp:ScriptManager>
        <%--Ressource Manager    --%>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
        <%--Language Stores--%>
        <ext:Store ID="LanguageStore" runat="server" SerializationMode="Complex">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="LanguageId" />
                        <ext:RecordField Name="Value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:Panel runat="server" Region="Center" Border="false" Padding="6"  Layout="fit">
                    <Content>
                        <div>
                            <asp:ContentPlaceHolder ID="ContentMaster" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </Content>
                </ext:Panel>
                <ext:Panel runat="server" Region="South" Split="true" Collapsible="true" Height="250" Padding="6" Layout="fit">
                    <Content>
                        <div>
                            <asp:ContentPlaceHolder ID="ContentDetail" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

I bind the Store at PageLoad

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack And Not ExtNet.IsAjaxRequest Then
                BindMainStore(False)
            End If
        End Sub

        Private Sub BindMainStore(ByVal doRefresh As Boolean)
            Try

                Dim orderList = Proxy.GetOrderList()
                storeOrder.DataSource = orderList
                storeOrder.DataBind()


                If doRefresh Then
                    gridOrder.RefreshView()
                End If

            Catch ex As Exception
                Throw New Exception(ex.Message)
            End Try

        End Sub

Any Idea ?
I need to get this Page running at Monday morning :-/

Peter

**Daniil** · Aug 18, 2012, 7:25 AM

Please remove <div> here:

<div>
    <asp:ContentPlaceHolder ID="ContentMaster" runat="server">
    </asp:ContentPlaceHolder>
</div>

**sisa** · Aug 18, 2012, 7:43 AM

Same error...

**Daniil** · Aug 18, 2012, 9:08 AM

I just discovered that you add Store and Panel into <head>. Please move it to <body>.

**sisa** · Aug 18, 2012, 1:00 PM

Uiiii - what a shame !

Didn't see that :-(

Thank you !
Peter

Thread: [CLOSED] GridPanel Layout with Masterpages

Thread Tools

Search Thread

Display

[CLOSED] GridPanel Layout with Masterpages

Similar Threads

[CLOSED] Problem with Page.X() and masterpages

[CLOSED] ViewState and MasterPages

Problem With editor in MasterPages & User web Control

[CLOSED] FitLayout & masterpages

[FIXED] [V0.6] Ext.onReady script block and MasterPages not combining properly

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] GridPanel Layout with Masterpages

[CLOSED] GridPanel Layout with Masterpages

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us