Feb 24, 2011, 8:27 AM
By the way, my first sample also works fine if set fixed Width for container.
Generally speaking, HBox works fine if fixed width or flex are specified for its items.
Example
Generally speaking, HBox works fine if fixed width or flex are specified for its items.
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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
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" }
};
}
}
</script>
<!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 runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Container
runat="server"
AutoScroll="true"
Layout="hbox"
StyleSpec="position: relative;">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Flex="1" />
<ext:Container runat="server" Width="600">
<Items>
<ext:CompositeField runat="server">
<Items>
<ext:DisplayField runat="server" Text="Test" />
</Items>
</ext:CompositeField>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="200"
AutoExpandColumn="company">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
<ext:Container runat="server">
<Content>
<div style="height:1000px;width:185px;border:1px solid red;background-color:red;"></div>
</Content>
</ext:Container>
</Items>
</ext:Container>
<ext:Container runat="server" Flex="1" />
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>