PDA

View Full Version : [CLOSED] Nested Border Layouts



mj.daly
Nov 30, 2012, 4:20 PM
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
Nov 30, 2012, 4:31 PM
Solution is to set the Height of the panel that is a nested border layout. MinHeight does not do the job.

Daniil
Nov 30, 2012, 4:52 PM
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>