PDA

View Full Version : [CLOSED] GridPanel with dynamic height



jchau
Mar 15, 2013, 6:02 PM
Is it possible to have a grid on a page without specifying its height? I want the grid's height to grow and shrink based on its content.

Baidaly
Mar 16, 2013, 12:15 AM
Hello!

If you have only one Grid in a page it will grow and shrink dynamicly. If your grid inside some container this container should have FitLayout: http://examples2.ext.net/#/GridPanel/Layout/FitLayout/ .

jchau
Mar 16, 2013, 12:21 AM
Hello!

If you have only one Grid in a page it will grow and shrink dynamicly. If your grid inside some container this container should have FitLayout: http://examples2.ext.net/#/GridPanel/Layout/FitLayout/ .

I have a panel and inside I want a grid and two labels. I want the grid to grow and stretch the panel as needed...

Baidaly
Mar 16, 2013, 12:47 AM
Can you provide sample, I don't quite understand what kind of labels do you mean?

Daniil
Mar 18, 2013, 6:33 AM
Hi,

By default, a GridPanel's ShrinkWrap is "Height". So, it seems to behave as you need.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<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" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Add row" Handler="App.GridPanel1.getStore().add({});" />

<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>
</form>
</body>
</html>

See also
http://docs.sencha.com/ext-js/4-2/#!/api/Ext.AbstractComponent-cfg-shrinkWrap