Aug 27, 2013, 1:56 AM
[CLOSED] Layout Fit not working properly
Please see the attached example.
ext.1.7
1. open page
2. click ICON (don't expand it will crash since is standalone)
3. SOUTH panel will expand.
PROBLEM #1
expected. layout fit should apply
actual: layout fit not applied.
Now remove the entire formPanel in the tab and repeat. Magically, it works perfects.
PROBLEM #2
1. do steps 1-3
2. click the Add E button.
expected: form loads properly.
actual: form loads incorrectly.
Please assist to determine when it fails with the formPanel.
Thanks!
/Z
ext.1.7
1. open page
2. click ICON (don't expand it will crash since is standalone)
3. SOUTH panel will expand.
PROBLEM #1
expected. layout fit should apply
actual: layout fit not applied.
Now remove the entire formPanel in the tab and repeat. Magically, it works perfects.
PROBLEM #2
1. do steps 1-3
2. click the Add E button.
expected: form loads properly.
actual: form loads incorrectly.
Please assist to determine when it fails with the formPanel.
Thanks!
/Z
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StaticTest.aspx.cs" Inherits="Crystal.Views.Support.StaticTest" %>
<%@ Import Namespace="Crystal" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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></title>
<style type="text/css">
.red-text {
color : red;
font-size : large;
}
.blue-text {
color : blue;
font-size : large;
}
</style>
<script type="text/javascript">
var renderEsAssigned = function (node) {
var grid = Ext.getCmp("GridPanelEsAssigned");
grid.render();
grid.store.load();
};
var showDetailPanel = function (node, store, isNew) {
if (node == null) {
//noop
} else {
var nodeId = node.id;
var nodeText = node.text;
if (nodeId != null) {
store.load({
callback: function (a, b, c) {
//expand the panel
Ext.getCmp("TabPanelADetails").setHeight(400);
Ext.getCmp("TabPanelADetails").expand();
Ext.getCmp("ViewportModel").doLayout();
}
});
}
}
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new List<Company>
{
new Company(1, "3m Co", 71.72, 0.02, 0.03, true),
new Company(2, "Alcoa Inc", 29.01, 0.42, 1.47, true),
new Company(3, "Altria Group Inc", 83.81, 0.28, 0.34, true),
new Company(4, "American Express Company", 52.55, 0.01, 0.02, true),
new Company(5, "American International Group, Inc.", 64.13, 0.31, 0.49, true),
new Company(6, "AT&T Inc.", 31.61, -0.48, -1.54, true),
new Company(7, "Boeing Co.", 75.43, 0.53, 0.71, true),
new Company(8, "Caterpillar Inc.", 67.27, 0.92, 1.39, true),
new Company(9, "Citigroup, Inc.", 49.37, 0.02, 0.04, true),
new Company(10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, true),
new Company(11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, true),
new Company(12, "General Electric Company", 34.14, -0.08, -0.23, true),
new Company(13, "General Motors Corporation", 30.27, 1.09, 3.74, true),
new Company(14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, true),
new Company(15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
new Company(16, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, true)
};
this.Store1.DataBind();
}
public class Company
{
public Company(long id, string name, double price, double change, double pctChange, bool checkedVal)
{
this.id = id;
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
this.checkedVal = checkedVal;
}
public long id { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public bool checkedVal { get; set; }
}
</script>
</head>
<body>
<form id="AddNodeForm" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="id">
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" />
<ext:RecordField Name="Change" />
<ext:RecordField Name="PctChange" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="ViewportModel" runat="server" Layout="FitLayout">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server" >
<Center>
<ext:Panel runat="server"
ID="CenterPanel"
Layout="FitLayout"
Anchor="100% 100%"
AutoWidth="true">
<Items>
<ext:TreePanel
ID="TreePanelAs"
runat="server"
Title="A"
RootVisible="true"
Layout="FitLayout"
Anchor="100% 100%"
Width="600"
Icon="Neighbourhood"
Border="false"
AutoScroll="true"
UseArrows="true"
EnableDD="false">
<Sorter FolderSort="true" />
<Root>
<ext:AsyncTreeNode AutoDataBind="true" Icon="UserHome " AllowDrag="false" Draggable = "false" NodeID="1" Text="1" />
</Root>
<Listeners>
<Click Handler="showDetailPanel(node, #{Store1}, 'N');" />
</Listeners>
</ext:TreePanel>
</Items>
</ext:Panel>
</Center>
<South Split="true">
<ext:TabPanel
ID="TabPanelADetails"
runat="server"
Anchor="100% 100%"
Height="500"
Collapsible="true"
Title="Detail Panel"
AnimCollapse="false"
Collapsed="true"
CollapseMode="Default"
ActiveTabIndex="0">
<Listeners>
<Expand Handler="#{TreePanelAs}.disable();"/>
<Collapse Handler="#{TreePanelAs}.enable();"/>
</Listeners>
<Items>
<ext:Panel Layout="FitLayout" runat="server" AutoWidth="true" ActiveIndex="2" ID="EPanel" Border="False" Title="Es">
<Listeners>
<Activate Single="true" Fn="renderEsAssigned" />
</Listeners>
<Items>
<ext:FormPanel
ID="FormPanelS"
runat="server"
Title="S"
Anchor="100% 100%"
Layout="FitLayout"
Icon="User"
Hidden="true"
>
<BottomBar>
<ext:Toolbar ID="ToolbarSearchE" runat="server">
<Items>
<ext:Button ID="ButtonESearch" runat="server" Text="Search Es" Icon="Find"/>
</Items>
</ext:Toolbar>
</BottomBar>
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="11" MaxLength="20"/>
<ext:TextField ID="TextField2" runat="server" FieldLabel="22" MaxLength="30"/>
<ext:TextField ID="TextField3" runat="server" FieldLabel="33" MaxLength="30"/>
<ext:TextField ID="TextField4" runat="server" FieldLabel="44" MaxLength="10"/>
<ext:ComboBox ID="ComboBox1"
runat="server"
FieldLabel="55"
Editable="true"
DisplayField="description"
ValueField="id"
TypeAhead="true"
AllowBlank = "true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select a ..."
SelectOnFocus="true">
</ext:ComboBox>
<ext:ComboBox ID="ComboBox2"
runat="server"
FieldLabel="66"
Editable="true"
DisplayField="description"
ValueField="id"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select a 66..."
SelectOnFocus="true">
</ext:ComboBox>
</Items>
<KeyMap >
<ext:KeyBinding>
<Keys>
<ext:Key Code="ENTER" />
</Keys>
<Listeners>
<Event Handler="Ext.getCmp('ButtonESearch').fireEvent('click')" />
</Listeners>
</ext:KeyBinding>
</KeyMap>
</ext:FormPanel>
<ext:GridPanel
ID="GridPanelEsAssigned"
runat="server"
Title="Es"
Layout="FitLayout"
StoreID="Store1"
Anchor="100% 100%"
AutoWidth="true"
AutoRender="false">
<Listeners>
<Activate Single="true" Fn="renderEsAssigned" />
</Listeners>
<ColumnModel ID="ColumnModelTd" runat="server">
<Columns>
<ext:Column ColumnID="No." Editable="false" Width="35" DataIndex = "id" Header="id" />
<ext:Column ColumnID="t1" Header="t1" Width="70" DataIndex="Price" >
</ext:Column>
<ext:Column ColumnID="t2" Header="t2" Width="70" DataIndex="Price">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel >
<ext:RowSelectionModel ID="RowSelectionModelAssignedEs" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbarE"
runat="server"
PageSize="50"
DisplayInfo="true"
DisplayMsg="Displaying results {0} - {1} of {2}"
EmptyMsg="No results to display">
<Items>
<ext:Button ID="ButtonAddE" runat="server" Text="Add E" Icon="Add">
<ToolTips>
<ext:ToolTip ID="ToolTipAddEButton" runat="server" Title="Add E" Html="Click." />
</ToolTips>
<Listeners>
<Click Handler="FormPanelS.setVisible(true);GridPanelEsAssigned.setVisible(false);"/>
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</South>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 28, 2013 at 3:39 AM.
Reason: [CLOSED]
