Labels are cut after opening new tab from Grid

  1. #1

    Labels are cut after opening new tab from Grid

    Hello

    I see this in more our applications, using different ext.net versions ( 4 or 5 in general), example below taken from Ext.net 5.2.0


    Code Below is shortened version to single page of what we are using.

    Practically - all I want is to open new tab (Ext.panel in Ext.tab.Panel) when clicking on the "edit" link of the grid, in the new tab. Classes for panel are known already. It works if I click button outside the grid. but it does not work when the action is initialized direclty in the grid. Seems to have something to do with grid selection focus

    "it does not work" means that panel opens fine, but first frame has labels little cut (see the screenshot)

    Click image for larger version. 

Name:	captureforforum.PNG 
Views:	45 
Size:	7.2 KB 
ID:	25525

    In bigger forms looks pretty ughly....

    In order to reproduce - page below should not have any external reference. Click the "Add Tab - fails" and see that the labels of first panel are little cut.

    if focus is moved outside of the grid, or if I add panel using hte button it works fine ( labels are fully rendered)

    Note - it works fine as well fine if grid is above the tab panel (i.e always visible)


    <%@ Page Language="C#" %>
    
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = 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" }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <script>
        function addTabThrougGridOK() {
            alert('In next 3 seconds put focus to the dummy field');
            var f = function() {
                addPanel();
            }
            Ext.defer(f, 3000, this);
    
        }
        function addPanel() {
    
            var panel = Ext.getCmp('panel');
            panel.add(new FormatEditPanel());
            panel.setActiveTab(panel.items.length - 1);
        }
    
        function addTabThrougGridError() {
            addPanel();
        }
        function onload() {
            
    
            Ext.define('FormatEditPanel',
                {
                    alias: 'widget.FormatEditPanel',
                    title: 'Format',
                    border: false,
                    "extend": "Ext.form.Panel",
                    items: [
                        {
                            border: false,
                            items: [
                                {
                                    xtype: "container",
                                    items: [
                                        {
                                            frame: true,
                                            flex: 1,
                                            defaults: {
                                                "labelWidth": 120
                                            },
                                            items: [
                                                {
                                                    reference: "txtName",
                                                    xtype: "textfield",
                                                    fieldLabel: "Format Name",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    indicatorIconCls: "#BulletRed",
                                                    allowBlank: false,
                                                    blankText: " is required",
                                                    enableKeyEvents: true
                                                }, {
                                                    reference: "txtDOSExtension",
                                                    xtype: "textfield",
                                                    fieldLabel: "DOS Extension",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    indicatorIconCls: "#BulletRed",
                                                    allowBlank: false,
                                                    blankText: " is required",
                                                    enableKeyEvents: true
                                                }
                                            ],
                                            layout: {
                                                type: "vbox",
                                                align: "stretch"
                                            },
                                            title: "Details"
                                        }, {
                                            frame: true,
                                            margin: "5 0 0 0",
                                            flex: 1,
                                            items: [
                                                {
                                                    reference: "txtComClassId",
                                                    xtype: "textfield",
                                                    fieldLabel: "ComClassId",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    preserveIndicatorIcon: true,
                                                    blankText: "ComClassId is required",
                                                    enableKeyEvents: true
                                                }, {
                                                    reference: "txtMimeType",
                                                    xtype: "textfield",
                                                    fieldLabel: "Mime Type",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    preserveIndicatorIcon: true,
                                                    blankText: "Mime Type is required",
                                                    enableKeyEvents: true
                                                }
                                            ],
                                            layout: {
                                                type: "vbox",
                                                align: "stretch"
                                            },
                                            collapsible: true,
                                            title: "Advanced"
                                        }
                                    ]
                                }
                            ],
                            layout: {
                                type: "vbox",
                                align: "stretch"
                            },
                            buttonAlign: "left",
                            tbar: {
                                xtype: "toolbar",
                                items: [
                                    {
                                        xtype: "tbfill"
                                    }, {
                                        hidden: true,
                                        reference: "btnSwitchToEdit",
                                        text: "Edit"
                                    }, {
                                        hidden: true,
                                        reference: "btnSwitchToView",
                                        text: "View"
                                    }
                                ]
                            }
                        }
                    ],
                    buttons: [
                        {
                            reference: "btnSave",
                            text: "Save"
                        }, {
                            reference: "btnClose",
                            text: "Close"
                        }
                    ],
                    closable: true
                    
                    
                });
        }
    </script>
    
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Namespace="" Theme="Gray"/>
            <ext:TextField runat="server" FieldLabel="Dummy Field"></ext:TextField>
            <ext:TabPanel runat="server" ID="panel" >
                <Items>
                    <ext:GridPanel
                        runat="server"
                        ID="grid"
                        Width="750"
                        Title="Grid"
                        Height="420">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column
                                    runat="server"
                                    Text="Company"
                                    DataIndex="company"
                                    Flex="1"
                                />
                       
                                <ext:CommandColumn runat="server" Width="200">
                                    <Commands>
                             
                                        <ext:GridCommand Icon="NoteEdit" Text="Add Tab- FAILS" CommandName="Edit">
                                            <ToolTip Text="Edit" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <Listeners>
                                        <Command Handler="addTabThrougGridError()" />
                                    </Listeners>
                                </ext:CommandColumn>
                                <ext:CommandColumn runat="server" Width="200">
                                    <Commands>
                             
                                        <ext:GridCommand Icon="NoteEdit" Text="Add Tab - OK" CommandName="Edit">
                                            <ToolTip Text="Edit" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <Listeners>
                                        <Command Handler="addTabThrougGridOK()" />
                                    </Listeners>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Single" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:TabPanel>
    
           <ext:Button runat="server" Text="Add Tab - OK" OnClientClick="addPanel()"></ext:Button>
        </form>
    
    <script>
        Ext.onReady(onload);
    </script>
    </body>
    </html>

    Ext.Version:
    Chrome: Version {version: "90.0.4430.85", pad: 0, shortVersion: "900443085", releaseValue: 0
    core: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
    ext: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
    extjs: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
  2. #2
    Hello @Ibrohan!

    I have looked at your issue yesterday and could reproduce it, thanks for the very straightforward test case, by the way! We still couldn't get at the bottom of it and I ended up not leaving a feedback yesterday. We are working on it; at first it looks like we could just automate the "focus out" action to work-around the issue in the worst case, but we want to ultimately identify what exactly causes that layout misbehavior and counter it.

    We'll post back here soon with a solution for you.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @ibrohan!

    I am afraid this is an old issue (#892) that has no easy fix, but several forms of avoiding.

    Some options you have here to get rid of this misbehavior:

    1. auto-focus-out: Well, this one you already know, just focus something outside the panel. You can automate this with the compoent's .focus() method and either do the delay yourself like in your suggestion or use the method's parameters to pass a delay and a callback to create the tab. Downside is, relying on delays can be problematic as client stations are subject to transient performance fluctuations, but will add a bit more of code to your client-side components definitions. Maybe the delay can be eliminated by the use of focus() (see below).

    2. simply add left space: Simplest, but will lead to a subtle layout inconsistency: just add &nbsp; at the beginning of every fieldLabel values for the affected fields. This would add a leading space and "cover for" the shift in layout, so it may not look great as still some tabs will be shifted while others won't, albeit nothing would be hidden anymore.

    3. delayed show: Hide indicator in every component with indicatorHidden: true. Then, once first layout iteration is done, show them. This would eliminate the need of delays (if any) of the solution (1). Important bit here is -all fields- must have the indicator element hidden before the view is fixed. Then they can all be shown back the indicator without issues. Another bright side besides no delay is, the forms won't get layout inconsistencies inherent from solution (2).

    Here's your test case adapted with solutions (1) and (3); being (3) applied; (1) enabled by commenting a couple lines:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = 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" }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <script>
        function addTabThrougGridOK() {
            // This would work without the 'indicatorHidden: true' and afterlayout listener below.
            Ext.getCmp(Ext.getBody().down('.x-field.x-form-type-text').id).focus(false, null, addPanel);
        }
    
        function addPanel() {
            var panel = Ext.getCmp('panel');
            panel.add(new FormatEditPanel());
            panel.setActiveTab(panel.items.length - 1);
        }
    
        function addTabThrougGridError() {
            addPanel();
        }
    
        function onload() {
            Ext.define('FormatEditPanel',
                {
                    alias: 'widget.FormatEditPanel',
                    title: 'Format',
                    border: false,
                    "extend": "Ext.form.Panel",
                    items: [
                        {
                            border: false,
                            items: [
                                {
                                    xtype: "container",
                                    items: [
                                        {
                                            frame: true,
                                            flex: 1,
                                            defaults: {
                                                "labelWidth": 120
                                            },
                                            items: [
                                                {
                                                    reference: "txtName",
                                                    xtype: "textfield",
                                                    fieldLabel: "Format Name",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    //indicatorHidden: true,
                                                    indicatorIconCls: "#BulletRed",
                                                    allowBlank: false,
                                                    blankText: " is required",
                                                    enableKeyEvents: true
                                                }, {
                                                    reference: "txtDOSExtension",
                                                    xtype: "textfield",
                                                    fieldLabel: "DOS Extension",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    //indicatorHidden: true,
                                                    indicatorIconCls: "#BulletRed",
                                                    allowBlank: false,
                                                    blankText: " is required",
                                                    enableKeyEvents: true
                                                }
                                            ],
                                            layout: {
                                                type: "vbox",
                                                align: "stretch"
                                            },
                                            title: "Details",
                                            listeners: {
                                                afterlayout: {
                                                    fn: function (cmp) {
                                                        cmp.items.each(function (innerComponent) {
                                                            if (innerComponent.isIndicatorActive && innerComponent.indicatorHidden) {
                                                                Ext.toast("Show indicator for " + innerComponent.id);
                                                                innerComponent.showIndicator();
                                                            }
                                                        });
                                                    }
                                                }
                                            }
                                        }, {
                                            frame: true,
                                            margin: "5 0 0 0",
                                            flex: 1,
                                            items: [
                                                {
                                                    reference: "txtComClassId",
                                                    xtype: "textfield",
                                                    fieldLabel: "ComClassId",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    preserveIndicatorIcon: true,
                                                    blankText: "ComClassId is required",
                                                    enableKeyEvents: true
                                                }, {
                                                    reference: "txtMimeType",
                                                    xtype: "textfield",
                                                    fieldLabel: "Mime Type",
                                                    msgTarget: "qtip",
                                                    validateOnFocusLeave: true,
                                                    preserveIndicatorIcon: true,
                                                    blankText: "Mime Type is required",
                                                    enableKeyEvents: true
                                                }
                                            ],
                                            layout: {
                                                type: "vbox",
                                                align: "stretch"
                                            },
                                            collapsible: true,
                                            title: "Advanced"
                                        }
                                    ]
                                }
                            ],
                            layout: {
                                type: "vbox",
                                align: "stretch"
                            },
                            buttonAlign: "left",
                            tbar: {
                                xtype: "toolbar",
                                items: [
                                    {
                                        xtype: "tbfill"
                                    }, {
                                        hidden: true,
                                        reference: "btnSwitchToEdit",
                                        text: "Edit"
                                    }, {
                                        hidden: true,
                                        reference: "btnSwitchToView",
                                        text: "View"
                                    }
                                ]
                            }
                        }
                    ],
                    buttons: [
                        {
                            reference: "btnSave",
                            text: "Save"
                        }, {
                            reference: "btnClose",
                            text: "Close"
                        }
                    ],
                    closable: true
                });
        }
    </script>
    
    <html>
    <head runat="server">
        <title>63129 - Fields shifted if grid focused during panel create.</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Namespace="" Theme="Gray">
                <Listeners>
                    <DocumentReady Fn="onload" />
                </Listeners>
            </ext:ResourceManager>
            <ext:TextField runat="server" FieldLabel="Dummy Field" />
            <ext:TabPanel runat="server" ID="panel" >
                <Items>
                    <ext:GridPanel
                        runat="server"
                        ID="grid"
                        Width="750"
                        Title="Grid"
                        Height="420">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column
                                    runat="server"
                                    Text="Company"
                                    DataIndex="company"
                                    Flex="1"
                                />
                                <ext:CommandColumn runat="server" Width="200">
                                    <Commands>
                                        <ext:GridCommand Icon="NoteEdit" Text="Add Tab- FAILS" CommandName="Edit">
                                            <ToolTip Text="Edit" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <Listeners>
                                        <Command Handler="addTabThrougGridError()" />
                                    </Listeners>
                                </ext:CommandColumn>
                                <ext:CommandColumn runat="server" Width="200">
                                    <Commands>
                                        <ext:GridCommand Icon="NoteEdit" Text="Add Tab - OK" CommandName="Edit">
                                            <ToolTip Text="Edit" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <Listeners>
                                        <Command Handler="addTabThrougGridOK()" />
                                    </Listeners>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Single" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:TabPanel>
           <ext:Button runat="server" Text="Add Tab - OK" OnClientClick="addPanel()" />
        </form>
    </body>
    </html>
    To effectively check solution (1), just comment the two lines containing indicatorHidden: true (72 and 83). You can try to reduce the delay in line 32 from 1000 to, 100, 50, 10, 1, or null, to make it run immediately. All these low and null values worked for me but I suggest you check out in the actual production scenario with real production clients if the immediate alternative works for you here (and we'd love to hear your feedback about that).

    This is a bit tricky issue and the same behavior in Chrome is also reproducible in Firefox. I hope one of the alternatives above, or maybe some of the alternatives you get if you browse through the GitHub issue and related threads work for you for the time being.

    If none of them are working and you can adapt the test case to show the scenario where it still breaks, please don't hesitate to share!

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid last row cut off
    By advBackOffice in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 28, 2013, 3:45 PM
  2. [CLOSED] JS Error opening new tab in MVC app
    By Z in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Nov 27, 2012, 4:42 PM
  3. Replies: 1
    Last Post: Aug 13, 2009, 1:17 AM
  4. Opening new tab from within a tab
    By xylim in forum 1.x Help
    Replies: 4
    Last Post: Jun 11, 2009, 12:43 AM
  5. opening a page in tab
    By pearl in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2009, 5:38 AM

Posting Permissions