PDA

View Full Version : [CLOSED] 4.2: Content cutoff without scrollbar sometimes



aedos
6 May 2013, 2:58 PM
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:


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

slemmon
6 May 2013, 5:16 PM
Thanks for the report! I have opened a bug in our bug tracker.

aedos
7 May 2013, 11:55 AM
Is there a temp fix we can apply on top of 4.2 GA? We may need to release the app before next upgrade.

dongryphon
9 Jun 2013, 2:01 PM
On this issue, try removing the (apparently) unneeded container:



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.

aedos
10 Jun 2013, 11:39 AM
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:
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.
We also opened a support ticket (12121) to facilitate the discussion.
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.
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.