[CLOSED] Layout problem when disabling a Panel

  1. #1

    [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.

    <%@ 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]
  2. #2
    Hi Vadym,

    I've reproduced the issue. Investigating.
  3. #3
    I guess it is bug in ExtJS 3.4.0
    I can suggest the following workaround, replace the following code
    tab.setDisabled(true);
    by this
    var el = TabPanel1.getTabEl(tab);
                            if(el){
                                Ext.fly(el).addClass('x-item-disabled');
                            }
                            tab.disabled = true;
    and the following code
    tab.setDisabled(false);
    by this
    var el = TabPanel1.getTabEl(tab);
                        if(el){
                            Ext.fly(el).removeClass('x-item-disabled');
                        }
                        tab.disabled = false;
  4. #4
    Here is a simplified test case.

    Example
    <%@ Page Language="C#" %>
    
    <!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 v1 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:TabPanel runat="server" Height="200">
                <Items>
                    <ext:Panel 
                        ID="Panel1" 
                        runat="server" 
                        Title="Tab 1" 
                        HideMode="Offsets" />
                    
                    <ext:Panel runat="server" Title="Tab 2">
                        <Items>
                            <ext:Button runat="server" Text="Disable Tab 1">
                                <Listeners>
                                    <Click Handler="Panel1.disable();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    The key point is the fact of disabling a hidden tab with HideMode="Offsets". I think it is a bug. Though, it might be quite difficult to fix it and be sure that a fix doesn't break some another scenario. So, if you don't mind I would prefer to talk about a solution specific to your scenario.

    I know that HideMode="Offsets" might be required for proper layouting of a tab that is initially hidden. So, it is probably not an option to remove it.

    I can suggest to use this code to disable hidden tabs:
    Ext.fly(tab.tabEl).addClass('x-item-disabled');
    tab.disabled = true;
    EDIT: Tecnically, the same as Vladimir's solution, just I didn't see he posted something.
    Last edited by Daniil; Aug 04, 2014 at 10:48 AM.
  5. #5
    Thanks much, Vladimir & Daniil!

    Your suggested workaround is working well for me so you may close this thread down.

Similar Threads

  1. [CLOSED] problem layout grid panel group after edit cell
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 23, 2014, 1:23 PM
  2. [CLOSED] Panel Layout Problem (Inside controls: Multselect and Button)
    By escreenricext in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 12, 2013, 3:58 PM
  3. [CLOSED] Layout problem with a Panel
    By Bert76 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 12, 2011, 8:13 AM
  4. Replies: 5
    Last Post: May 05, 2011, 7:05 PM
  5. [CLOSED] [1.0] Form Status Panel in a Fit Layout problem
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 28
    Last Post: Jan 26, 2010, 9:54 AM

Tags for this Thread

Posting Permissions