[CLOSED] Nested Border Layouts

[mj.daly]

How can I add the nested border layout so it renders correctly?

<ext:Viewport runat="server" Layout="Fit">        <Items>
            <ext:Panel runat="server" Layout="Border">
                <Items>
                    <ext:GridPanel runat="server" ID="GridAccounts" Region="North" Title="Accounts" MinHeight="200"
                        AutoScroll="True" Layout="Fit">
                        <Store>
                            <ext:Store runat="server" AutoLoad="True">
                                <Proxy>
                                    <ext:RestProxy runat="server" Url='http://localhost/OnlineService/accounts?format=json'>
                                        <Reader>
                                            <ext:JsonReader runat="server" Root="Accounts" />
                                        </Reader>
                                        <Writer>
                                            <ext:JsonWriter runat="server" AllowSingle="True" />
                                        </Writer>
                                    </ext:RestProxy>
                                </Proxy>
                                <Model>
                                    <ext:Model runat="server" IDProperty="Id" Name="Account">
                                        <Fields>
                                            <ext:ModelField runat="server" Name="Id" Type="Int" UseNull="True" />
                                            <ext:ModelField runat="server" Name="Login" />
                                            <ext:ModelField runat="server" Name="Password" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Id" DataIndex="Id" />
                                <ext:Column ID="Column2" runat="server" Text="Login" DataIndex="Login" />
                                <ext:Column ID="Column3" runat="server" Text="Password" DataIndex="Password" />
                            </Columns>
                        </ColumnModel>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add" Icon="Add">
                                        <Listeners>
                                            <Click Handler="
var grid = #{GridAccounts}, store = grid.getStore();
Ext.Ajax.request({
    url: 'http://localhost/OnlineService/accounts?format=json',
    method: 'POST',
    success: function(response, opts) {
       store.reload();
    },
    failure: function(response, opts) {
       Ext.alert('server-side failure with status code ' + response.status);
    }
});                                    
                                    " />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:GridPanel>
                    <ext:FormPanel runat="server" ID="FormPanel_Upload" Region="Center" MinHeight="200"
                        Layout="Fit">
                        <Items>
                            <ext:GridPanel runat="server" ID="GridJobs" Title="Jobs" Layout="Fit" AutoScroll="True">
                                <Store>
                                    <ext:Store runat="server" AutoLoad="True">
                                        <Proxy>
                                            <ext:RestProxy runat="server" Url='http://localhost/OnlineService/jobs?format=json'>
                                                <Reader>
                                                    <ext:JsonReader runat="server" Root="Jobs" />
                                                </Reader>
                                                <Writer>
                                                    <ext:JsonWriter runat="server" AllowSingle="True" />
                                                </Writer>
                                            </ext:RestProxy>
                                        </Proxy>
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Id" Name="Job">
                                                <Fields>
                                                    <ext:ModelField runat="server" Name="Id" Type="Int" UseNull="True" />
                                                    <ext:ModelField runat="server" Name="Guid" />
                                                    <ext:ModelField runat="server" Name="Created" Type="Date" DateFormat="c" />
                                                    <ext:ModelField runat="server" Name="Status" />
                                                    <ext:ModelField runat="server" Name="StatusStarted" />
                                                    <ext:ModelField runat="server" Name="StatusInformation" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ID="Column4" runat="server" Text="Id" DataIndex="Id" />
                                        <ext:Column ID="Column5" runat="server" Text="Guid" DataIndex="Guid" />
                                        <ext:DateColumn ID="Column6" runat="server" Text="Created" DataIndex="Created" />
                                        <ext:Column ID="Column7" runat="server" Text="Status" DataIndex="Status" />
                                        <ext:Column ID="Column8" runat="server" Text="StatusStarted" DataIndex="StatusStarted" />
                                        <ext:Column ID="Column9" runat="server" Text="StatusInformation" DataIndex="StatusInformation" />
                                    </Columns>
                                </ColumnModel>
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                        <Items>
                                            <ext:FileUploadField runat="server" ID="FileUpload" />
                                            <ext:Button ID="SaveButton" runat="server" Text="Upload File" Icon="DiskUpload">
                                                <Listeners>
                                                    <Click Handler="
var grid = #{GridJobs}, store = grid.getStore();
var selectedJobs = grid.selModel.getSelection();
var selectedJob = null;
if (selectedJobs.length!=0){
    selectedJob = selectedJobs[0].data.Guid;
    var url2 = 'http://localhost/OnlineService/jobs/addImage/'+selectedJob+'?format=json'; 
    var form = this.up('form').getForm();
        form.submit({
            url: url2,
            method: 'POST',
            waitMsg: 'Uploading your photo...',
            success: function(fp, o) {
                Ext.Msg.alert('Success', 'File has been uploaded.');
                #{GridImages}.getStore().reload();


            },
            failure: function(fp, o) {
                Ext.Msg.alert('Success', 'File has not been uploaded.');
            }
        });
    }
else
{
    return false;
}                                           
                                            " />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="Button1" runat="server" Text="Add" Icon="Add">
                                                <Listeners>
                                                    <Click Handler="
var grid = #{GridJobs}, store = grid.getStore();
var selectedAccounts = #{GridAccounts}.selModel.getSelection();
var selectedAccount = null;
if (selectedAccounts.length!=0){
selectedAccount = selectedAccounts[0].data.Id;
}
if (selectedAccount!=null) {
    Ext.Ajax.request({
        url: 'http://localhost/OnlineService/jobs/create/'+selectedAccount+'?format=json',
        method: 'POST',
        success: function(response, opts) {
           store.reload();
        },
        failure: function(response, opts) {
           Ext.alert('server-side failure with status code ' + response.status);
        }
    });
}
                                    " />
                                                </Listeners>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:GridPanel>
                        </Items>
                    </ext:FormPanel>
                    <ext:Panel runat="server" Region="South" Layout="Fit">
                        <Items>
                            <ext:Panel runat="server" Layout="Border">
                                <Items>
                                    <ext:GridPanel runat="server" ID="GridImages" Region="Center" Title="Images" MinHeight="200"
                                        Height="200" AutoScroll="True" >
                                        <Store>
                                            <ext:Store ID="Store1" runat="server" AutoLoad="True">
                                                <Proxy>
                                                    <ext:RestProxy runat="server" Url='http://localhost/OnlineService/images?format=json'>
                                                        <Reader>
                                                            <ext:JsonReader runat="server" Root="Images" />
                                                        </Reader>
                                                        <Writer>
                                                            <ext:JsonWriter runat="server" AllowSingle="True" />
                                                        </Writer>
                                                    </ext:RestProxy>
                                                </Proxy>
                                                <Model>
                                                    <ext:Model ID="Model1" runat="server" IDProperty="Id" Name="Image">
                                                        <Fields>
                                                            <ext:ModelField runat="server" Name="Id" Type="Int" UseNull="True" />
                                                            <ext:ModelField runat="server" Name="JobId" />
                                                            <ext:ModelField runat="server" Name="FileName" />
                                                            <ext:ModelField runat="server" Name="Status" />
                                                            <ext:ModelField runat="server" Name="SizeInBytes" />
                                                            <ext:ModelField runat="server" Name="DateAdded" Type="Date" DateFormat="c" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:Column ID="Column10" runat="server" Text="Id" DataIndex="Id" />
                                                <ext:Column ID="Column11" runat="server" Text="JobId" DataIndex="JobId" />
                                                <ext:Column ID="Column15" runat="server" Text="Status" DataIndex="Status" />
                                                <ext:Column ID="Column12" runat="server" Text="File Name" DataIndex="FileName" />
                                                <ext:Column ID="Column14" runat="server" Text="Size" DataIndex="SizeInBytes" />
                                                <ext:DateColumn ID="Column13" runat="server" Text="Date Added" DataIndex="DateAdded" />
                                            </Columns>
                                        </ColumnModel>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

[mj.daly]

Solution is to set the Height of the panel that is a nested border layout. MinHeight does not do the job.

[Daniil]

Hi @mj.daly,

Only North and South regions requires height of flex to be set up.

A center region doesn't require any size, it will be stretched up to fill the whole remained space.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="North" 
                    Title="Main North" 
                    Height="100" />

                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Title="Main Center" 
                    Layout="BorderLayout">
                    <Items>
                        <ext:Panel 
                            runat="server" 
                            Region="North" 
                            Title="Nested North" 
                            Height="100" />

                        <ext:Panel runat="server" Region="Center" Title="Nested Center" />

                        <ext:Panel 
                            runat="server" 
                            Region="South" 
                            Title="Nested South" 
                            Height="100" />
                    </Items>
                </ext:Panel>

                <ext:Panel 
                    runat="server" 
                    Region="South" 
                    Title="Main South" 
                    Height="100" />
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>