Aug 03, 2014, 10:38 PM
[CLOSED] Layout problem when disabling a Panel
Hi,
Please consider the code sample below. Click on the "Edit" button on the first Panel and the result seems to be normal. When you click the "Edit" button on the second Panel, the layout appears in disarray. Please advise.
Please consider the code sample below. Click on the "Edit" button on the first Panel and the result seems to be normal. When you click the "Edit" button on the second Panel, the layout appears in disarray. Please advise.
<%@ 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();
this.Store2.DataSource = this.Data;
this.Store2.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" },
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.40, "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" }
};
}
}
</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 id="Head1" runat="server">
<title>Ext.Net 1.x</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
var edit = function (doEdit, index) {
var grid1 = GridPanel1;
var grid2 = GridPanel2;
var activeTab = TabPanel1.getActiveTab();
if (doEdit) {
TabPanel1.items.each(function (tab) {
if (tab.id != activeTab.id) {
tab.setDisabled(true);
}
});
grid1.setDisabled(true);
if (index == 1) {
ButtonEdit1.setDisabled(true);
ButtonCancel1.setDisabled(false);
}
else {
ButtonEdit2.setDisabled(true);
ButtonCancel2.setDisabled(false);
grid2.setDisabled(true);
}
}
else {
TabPanel1.items.each(function (tab) {
tab.setDisabled(false);
});
grid1.setDisabled(false);
grid2.setDisabled(false);
ButtonEdit1.setDisabled(false);
ButtonCancel1.setDisabled(true);
ButtonEdit2.setDisabled(false);
ButtonCancel2.setDisabled(true);
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server" MinHeight="160" Height="320"
Region="North" StripeRows="true" TrackMouseOver="true" Collapsible="false"
CollapseMode="Mini" SelectionMemory="Enabled" Split="true" AutoScroll="true"
Border="true">
<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">
<Renderer Format="UsMoney" />
</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:TabPanel ID="TabPanel1" runat="server" Region="Center" EnableTabScroll="true"
Border="false" MinTabWidth="190">
<Items>
<ext:Panel runat="server" ID="Panel1" Border="false" Layout="FitLayout" Title="Company Details" Icon="ApplicationEdit"
HideMode="Offsets">
<Items>
<ext:FormPanel runat="server" LabelAlign="Left"
Padding="10" ButtonAlign="Right" AutoScroll="false" Border="true" Frame="false"
TrackResetOnLoad="true">
<Items>
<ext:TextField runat="server" FieldLabel="First Name"></ext:TextField>
<ext:TextField runat="server" FieldLabel="Last Name"></ext:TextField>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="ButtonEdit1" runat="server" Text="Edit" Icon="ApplicationEdit" Width="80">
<Listeners>
<Click Handler="edit(true, 1);" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:Button ID="ButtonCancel1" runat="server" Text="Cancel" Icon="Cancel" Disabled="true"
ToolTip="Cancel" Width="80">
<Listeners>
<Click Handler="edit(false);" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:ToolbarFill>
</ext:ToolbarFill>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="Panel2" Border="false" Layout="BorderLayout" Title="Company Documents" Icon="ApplicationForm"
HideMode="Offsets">
<Items>
<ext:GridPanel
ID="GridPanel2"
runat="server" MinHeight="125" Height="250"
StripeRows="true" TrackMouseOver="true" Region="North" AutoScroll="true"
Collapsible="false" SelectionMemory="Enabled" CollapseMode="Mini" Split="true"
Border="true">
<Store>
<ext:Store ID="Store2" 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">
<Renderer Format="UsMoney" />
</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:Panel ID="Panel3" runat="server" Region="Center" Border="false" Height="300"
Layout="BorderLayout" AutoScroll="false">
<Items>
<ext:FormPanel runat="server"
Hidden="false" LabelAlign="Left" Padding="10" Region="Center" ButtonAlign="Right"
AutoScroll="false" Title="Edit Attributes" Border="true" Frame="false"
TrackResetOnLoad="true" Icon="PageWhiteWord">
<Items>
<ext:TextField runat="server" FieldLabel="Address Line1"></ext:TextField>
<ext:TextField runat="server" FieldLabel="Address Line2"></ext:TextField>
<ext:TextField runat="server" FieldLabel="Address Line3"></ext:TextField>
<ext:TextField runat="server" FieldLabel="Address Line4"></ext:TextField>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="ButtonEdit2" runat="server" Text="Edit" Icon="ApplicationEdit" Width="80">
<Listeners>
<Click Handler="edit(true, 2);" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:Button ID="ButtonCancel2" runat="server" Text="Cancel" Icon="Cancel" Disabled="true"
ToolTip="Cancel" Width="80">
<Listeners>
<Click Handler="edit(false);" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:ToolbarFill>
</ext:ToolbarFill>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 05, 2014 at 1:15 PM.
Reason: [CLOSED]