Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    3
    aedos is on a distinguished road

      0  

    Default 4.2: Content cutoff without scrollbar sometimes

    4.2: Content cutoff without scrollbar sometimes


    Ext version tested:
    • Ext 4.2.0.663
    Browser versions tested against:
    • IE9
    • Chrome 26
    • FF12
    Description:
    • When the content doesn't fit the screen, scrollbar sometimes does not show up as expected, and may require resizing the window or refresh the page sometimes for it to scroll correctly.
    Steps to reproduce the problem:
    • Resize the browser to be small (e.g. 600px wide)
    • Load the test case into the browser
    • You will notice some columns in the grid are cutoff without proper scrollbar
    • If you resize the browser window (or resize the west region) a tiny bit, the scrollbar shows up correctly, and you can scroll to see all columns in the Grid.
    • Now click the "Update Center" button in the north region, notice the Grid columns are cut off again
    Test Case:
    Code:
            
    Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                data:{'items':[
                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
    
    
            var grid = {
                title: 'Simpsons',
                shrinkWrap: true,
                shrinkWrapDock: true,
                xtype: 'grid',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { text: 'Name',  dataIndex: 'name', width:200 },
                    { text: 'Name2',  dataIndex: 'name', width:200 },
                    { text: 'Name3',  dataIndex: 'name', width:200 },
                    { text: 'Email', dataIndex: 'email', flex: 1 },
                    { text: 'Phone', dataIndex: 'phone' }
                ]
            };
    
    
            Ext.define('foo.tablecontainer', {
    //            extend: 'Ext.container.Container',
                extend: 'Ext.panel.Panel',
                border: false,
                alias:'widget.tablecontainer',
                defaultType: 'tablecontainer',
    
                layout:{
                    tableAttrs: {
                        style: {width:'100%'}
                    },
                    type:'table'
                },
    
                initComponent: function() {
                    this.callParent(arguments);
                    if (this.columns) {
                        this.layout.columns = this.columns;
                    }
                }
            });
    
            var centerConfig = {
                items:[
                    {
                        columns: 1,
                        items: [{
                            fieldLabel:'name',
                            width: 250,
                            value: 'Joe Smith',
                            xtype:'textfield'
                        },
                            {
                                fieldLabel:'email',
                                xtype:'textfield'
                            }]
                    },
                     grid
                ]
            };
    
    
            Ext.onReady(function () {
    
                Ext.create('Ext.container.Viewport', {
                    title: 'Border Layout',
                    layout: 'border',
                    items: [{
                        title: 'North Region',
                        region: 'north',
                        tbar:{
                            items:[
                                {
                                    handler: function() {
                                        var center = Ext.ComponentManager.get('center');
                                        Ext.suspendLayouts();
                                        center.removeAll();
                                        center.add(centerConfig);
                                        Ext.resumeLayouts(true);
                                    },
                                    text:'Update Center'
                                }
                            ]
                        },
                        height: 100
                    },{
                        title: 'West Region',
                        region:'west',
                        width: 200,
                        split: true,
                        collapsible: true
                    },{
                        title: 'Center Region',
                        region: 'center',
                        id: 'center',
                        xtype:'tablecontainer',
                        autoScroll: true,
                        items: centerConfig
                    }]
                });
            });
    The test case is a much simplified config hopefully sufficient to demonstrate the problem.
    Please note that the intended configuration is to show scrollbar only at the "center" region level when content doesn't fit into the browser window.


    *EDIT BY SLEMMON
    tested ok in 4.1.3
    I see the issue in 4.2 and 4.2.1.818
    Last edited by slemmon; 6 May 2013 at 5:16 PM. Reason: additional testing notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    3
    aedos is on a distinguished road

      0  

    Default


    Is there a temp fix we can apply on top of 4.2 GA? We may need to release the app before next upgrade.

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


    On this issue, try removing the (apparently) unneeded container:

    Code:
      var centerConfig = [
                {
                    columns: 1,
                    items: [{
                        fieldLabel:'name',
                        width: 250,
                        value: 'Joe Smith',
                        xtype:'textfield'
                    },{
                        fieldLabel:'email',
                        xtype:'textfield'
                    }]
                },
                grid
            ];
    This seems to have the scroll behavior you are after. With the extra container you need to configure it because it seems to be following "natural" size and sizing to its parent container while the children overflow that container and are clipped.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    3
    aedos is on a distinguished road

      0  

    Default


    Don,

    Thanks for the reply. This example is overly simplified, and some content was removed to reduce the code size. In our real app, some pages do have multiple level of nested containers and more content. We probably won't be able to change all the pages to have only one level of container.

    Regarding "With the extra container you need to configure it", how would we configure this extra container? In this example, the Center panel has xtype of "tablecontainer" which has defaultType of 'tablecontainer', therefore all descendant containers under Center panel would have the same xtype and Table layout configured. Do we need to do additional configuration for the nested container to behave correctly?

    We use Table layout for all level of containers under Center panel, because we have requirements: (1) do not cut off content with scrollbar, (2) do not show nested scrollbars and only scroll at Center panel level. We are open for suggestions if there are better ways to achieve this.


    Some more information:
    1. We have upgraded to ExtJs4.2.1, therefore we won't need a patch to 4.2.0. However we still need a proper fix for the latest version.
    2. We also opened a support ticket (12121) to facilitate the discussion.
    3. We have provided remote access to our real app to Sencha service, because fully reproducing the layout issues in standalone examples is very difficult and time-consuming.
    4. In our latest app (based on ExtJs4.2.1), the rendering problems (panel overlapping and missing scrollbar) appear to mainly happen with Chrome, but not other browsers. I'm attaching the screenshots.
    Attached Images

Thread Participants: 2

Tags for this Thread