PDA

View Full Version : [CLOSED] Border layout configuration issue + gridpanel autoheight?



John_Writers
May 23, 2013, 12:49 PM
Hi,
I'm configuring a layout for my web application, I use a master page but the following code is simplified.

I need a border layout with north, west and center regions.

In the north I have a fixed height header image.
In the west region I have the navigation menu.

In the center region there is a gridpanel.

I need that the grid panel fit the entire center region, also if I resize the browser window.

I can't figure out to make the gridpanel with fit layout

Thank you for your help.

Here above the simplified code:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>web app</title>
</head>
<body>
<form id="form1" runat="server">

<ext:ResourceManager ID="ResourceManager1" runat="server" EnableTheming="true" Theme="Gray" ScriptMode="Debug" />


<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
<Items>

<ext:Panel ID="pnlHeader" runat="server" Region="North"
Header="false"
Split="false"
Collapsible="false"
Border="false"
>
<Content>
(fixed height header)
</Content>
</ext:Panel>

<ext:Panel ID="pnlNavigationMenu" runat="server" Header="false" Region="West">
<Content>
(navigation menu)
</Content>
</ext:Panel>

<ext:Panel ID="Panel2" runat="server" Header="false" Region="Center">
<Content>
<ext:GridPanel ID="gp_BadgeReaders" runat="server" StoreID="st_BadgeReaders"
MultiSelect="false" AllowDeselect="false" Layout="FitLayout">

<Buttons>
<ext:Button ID="btnAdd" Icon="ApplicationAdd"
runat="server">
</ext:Button>
</Buttons>
</ext:GridPanel>

</Content>
</ext:Panel>

</Items>
</ext:Viewport>

</form>
</body>
</html>


In the CSS I have the following rules:



html, body
{
height: 100%;
}


The width of the gridpanel is ok (but when I resize the browser windows I have to refresh the page to relayout all..)

The big problem is to fit the height of the center region with the gridpanel.

Thank you.

geoffrey.mcgill
May 23, 2013, 1:29 PM
I think you need to set Layout="fit" on your "center" Panel, and change <Content> to <Items>.

Example


<ext:Panel
ID="Panel2"
runat="server"
Header="false"
Layout="fit"
Region="Center">
<Items>
<ext:GridPanel ID="gp_BadgeReaders"


Hope this helps.

John_Writers
May 23, 2013, 1:50 PM
Hi,
I tried to change the content to items tag, but I can't because the Items tag can't contain an asp:contentplaceholder.

Panel2 is in masterpage..



<ext:Panel ID="Panel2" runat="server" Header="false" Region="Center">

<Content>

####<asp:contentplaceholder>####

<ext:GridPanel ID="gp_BadgeReaders" runat="server" StoreID="st_BadgeReaders"

MultiSelect="false" AllowDeselect="false" Layout="FitLayout">

<Buttons>

<ext:Button ID="btnAdd" Icon="ApplicationAdd"
runat="server">
</ext:Button>
</Buttons>
</ext:GridPanel>

####</asp:contentplaceholder>####



</Content>
</ext:Panel>



I tried to simplify the example as mush as I can..

Also, I can't set the fit layout because in the content page I have one ext:store and ext can't manage the layout for a store..

Thank you for your help.

Daniil
May 23, 2013, 3:29 PM
Hi John,

Please move the Store to the GridPanel's Store.

Master Page

<%@ Master Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<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" Layout="FitLayout" Region="Center">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


Content Page

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</asp:Content>

John_Writers
May 24, 2013, 11:45 AM
Hi,
I moved all my stores to store tag inside controls, but I have an ext:XScript..

How can I move this thing?

Thank you for your time.

Have a good day!

Daniil
May 24, 2013, 12:28 PM
Please put it into the GridPanel's HtmlBin.

John_Writers
May 24, 2013, 12:39 PM
Ok!
Done.

Now the layout is ok.

Thank you!

Have a good day.

John_Writers
May 24, 2013, 2:57 PM
Hi,
I'm sorry now the layout is OK, but inside the content page I have a javascript.

After the layout change this script do not execute.

I tried to put the scipt in the master page but nothing to do: the script wont execute..

Thank you

Here above the code:


<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
var addnewtitle = '<asp:Literal runat="server" Text='<%$ Resources:Global, Cameras_Buttons_AddNew %>' />';
var editselectedtitle = '<asp:Literal runat="server" Text='<%$ Resources:Global, Cameras_Buttons_EditSelected %>' />';
</script>


<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</asp:Content>

Daniil
May 24, 2013, 4:10 PM
I tested the thing below with my example.

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
alert("test");
</script>

<ext:GridPanel ID="GridPanel1" runat="server">
...
</ext:GridPanel>
</asp:Content>

An alert box with "test" appears.

So, please provide a full test case.