PDA

View Full Version : [CLOSED] Gridpanel Auto Height and Width



hemantpatil
Mar 12, 2013, 11:16 AM
Hi,
i m using ext.net gridpanel in my asp.net app. in my page i have a div container for all of the controls. and the div is sized as 85% of the page width and to be centered horizontally. gridpanel is places withis the div tags. i want to resize the gridpanel according to div.
Now the problem that i m facing is, i have to set the width and height of the Gridpanel before rendering the page (designtime or from code behind), but i want the grid should be re-sized automatically (height and width) according to client area of browser, when the browser window is re-sized.
i searched on the forum n get to know about viewports and panels for the same but i can not use those as it covers whole page area and i have some other controls on the aspx page.
Any help would be greatly appreciates.

Daniil
Mar 12, 2013, 11:48 AM
Hi @hemantpatil,

The easiest way would be using a respective Ext.NET layout instead of the div.

Please post a simplified version of your page. We will try to help to organize layout.

geoffrey.mcgill
Mar 12, 2013, 12:04 PM
The width of the GridPanel should stretch to fill the available space.

Auto height may be a problem. The GridPanel has always required a defined .Height in px, but there may be options to get some auto height functionality by setting .AutoHeight="true". I'm 100% sure that property will work any more.

hemantpatil
Mar 12, 2013, 1:12 PM
Hi Daniil,

Below is my Aspx and code behind file for you referance.

Default.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Test_Ext.Net_GridPanel._Default" %>

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

<!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 id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<style>
.x-grid-row-over .x-grid-cell-inner
{
font-weight: bold;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var StatusRenderer = function (value, st) {
var ind = st.find("ID", value);
var r = st.getAt(ind);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Name;

};
</script>

</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Simple Array Grid</h1>
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<div style="width: 85%; vertical-align:top;margin:0 auto; text-align: left;">
<ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company">
<Editor>
<ext:TextField ID="txtCol1" runat="server" AllowBlank="false"/>
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
<Editor>
<ext:TextField ID="TextField1" runat="server"/>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</div>
<asp:Button ID="btnClick" runat="server" Text="Update"/>
</form>
</body>
</html>


Default.aspx.vb



Imports System.Web.UI.WebControls
Imports System.Configuration

Imports ext1 = Ext.Net
Imports Ext.Net
Imports Ext.Net.JSON

Partial Public Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Store1.DataSource = Me.Data
Me.Store1.DataBind()

GridPanel1.Width = 1000
GridPanel1.Plugins.Add(New Ext.Net.CellEditing)
End Sub

Private ReadOnly Property Data() As Object()
Get
Return New Object() {New Object() {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"}, New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"}, New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"}, New Object() {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"}, New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"}, New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"}, New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"}, New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"}, New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"}, New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"}, New Object() {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"}, _
New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"}, New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"}, New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"}, New Object() {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"}, New Object() {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"}, New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"}, New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"}, New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"}, New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"}, New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"}, New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"}, New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"}, New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"}, New Object() {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"}, New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}}
End Get
End Property
End Class

Daniil
Mar 12, 2013, 4:36 PM
Thank you.

Well, you can listen to the WindowResize event and re-calculate sizes manually.

<ext:ResourceManager runat="server">
<Listeners>
<WindowResize Handler="/* your handler */" />
</Listeners>
</ext:ResourceManager>

But as I said above it might be better to organize Ext.NET layout. Something like this.

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">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container
runat="server"
Html="Some Header"
Height="50" />

<ext:Container runat="server" Flex="1" Layout="HBoxLayout">
<Items>
<ext:Component runat="server" Flex="8" />

<ext:Container
runat="server"
Flex="85"
Height="350"
Html="The GridPanel is here"
StyleSpec="background-color: yellow;" />

<ext:Component runat="server" Flex="7" />
</Items>
</ext:Container>

<ext:Container runat="server" Height="22">
<Content>
<asp:Button runat="server" Text="Update" />
</Content>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>