PDA

View Full Version : [DUP] Horizontal Scrollbar not appearing on grid unless height of grid is defined



infernoz
5 Apr 2013, 1:03 PM
Ext version tested:

Ext 4.2.0.663


Browser versions tested against:

Firefox
IE8
IE9


Description:

A horizontal scrollbar does not appear in a grid panel when the contents of the panel is larger than the panel itself unless a height is set on panel
Related to the first point, a horizontal scrollbar does not appear in a grid panel even if a height is set unless data exists in the panel. This behavior does not allow users to view the headers names of columns without data in the grid


Steps to reproduce the problem:

Used the example grid and store from the ExtJS 4.1.0 and 4.2 documentation (same example). Made the width of the grid smaller so all fields cannot be seen without scrolling. I then commented out the height configuration and noticed that the horizontal scrollbar does not appear in the 4.2 version of ExtJS
Removing the store configuration from the grid prevents the horizontal scrollbar from appearing as well, even if a height is configured
AutoScroll: true or OverflowX: scroll/auto does not resolve these issues


The result that was expected:

The horizontal scrollbar should be present when the fields of a grid overflows the grids width and the user has specified that the contents should not be cut off (via autoScroll or overflowX). The height of the grid or the fact whether records are in the grid should not be a factor of whether the horizontal scrollbar appears


The result that occurs instead:

The only way to show the horizontal scrollbar is to specify a static height on the grid panel. This is not viable option when dynamic heights are needed for components, or if the user wants the height of the grid to be changed as data comes in and out of the component
When no data is in the grid, the horizontal scrollbar cannot be seen/used, which hides column headers from the user.


Test Case:
This example was taken from the ExtJS documentation. ExtJS 4.1.0 shows a scrollbar, but 4.2.0 does not. As you can see, data is cut off and not easily accessible without the horizontal scroll.


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'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
// height: 200,
width: 200,
autoScroll: true,
renderTo: Ext.getBody()
});


Even with a height set, if no data exists in the grid, a horizontal scrollbar cannot be used.

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'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
// store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 200,
autoScroll: true,
renderTo: Ext.getBody()
});


Both autoScroll and overflowX configs do not solve this issue

Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

only default ext-all.css


Operating System:

Windows 7

slemmon
5 Apr 2013, 1:23 PM
Thanks for the report! I have opened a bug in our bug tracker.

harel
23 May 2013, 7:12 AM
We are having this problem as well, and I wanted to inquire about any time frames ot have this resolved as we are very much dependant on the ability to do horizontal scrolls in our app which we are migrating from version 3.x ot 4.2. Is there an override we can call in the mean while to resolve this temporarily until the official fix is out?

Harel

harel
23 May 2013, 3:05 PM
No longer an issue.

WutongDeath
23 May 2013, 5:45 PM
I have the same problem, after upgraded to 4.2.1 and tested, NOT fixed!

infernoz
24 May 2013, 5:38 AM
I have yet to upgrade to 4.2.1 but intrigued if i should to resolve this issue. There are conflicting statements on this thread as to whether this issue was fixed. Could a sencha representative verify whether this bug was fixed in 4.2.1.

Furthermore, could someone point me in the direction where we could read the release notes/bug fixes for a release without downloading the release itself? This could be the place where one could verify whether a bug was fixed or not easily.

Thanks,

infernoz

infernoz
3 Sep 2013, 12:50 PM
Just wondering if there was any progress related to this bug.

Also is there a way of tracking bugs without downloading the latest ExtJS version and trying to see if the bug is fixed yourself, or posting the aforementioned question the forum?

Thanks,

infernoz

aspdotnet
24 Oct 2013, 7:16 PM
You can try this:

gridView = Ext.create('Ext.grid.Panel', {
id: gridViewId,
store: myStore,
columns: myColumns,
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: myStore,
displayInfo: true
}
],
viewConfig: {
loadMask: true,
stripeRows: false
},
emptyText: 'No data to display.'
});


//container
Ext.create('Ext.panel.Panel', {
id: containerId,
renderTo: divContainer,
width: '100%',
border: false,
items: [gridView]
});


function setHeightForGrid(grid) {
var h = grid.getHeight();
if (h > 0 && h < 400)
grid.view.setHeight(h);
else {
grid.view.setHeight(config.height);
}
}


function setWidthForGrid(grid) {
var widthOfPanel = Ext.getCmp(containerId).getWidth(),
columnCount = grid.view.panel.columns.length,
lastColumnW = grid.view.panel.columns[columnCount - 1].width,
w = 2;
for (var i = 0; i < columnCount; i++) {
w += grid.view.panel.columns[i].width;


}
if (w > widthOfPanel) {
w = widthOfPanel;
grid.view.setWidth(w);
grid.view.panel.setWidth(w);
}
else {
lastColumnW += widthOfPanel - w;
grid.view.panel.columns[columnCount - 1].setWidth(lastColumnW);
}
}

myStore.load({
callback: function () {
setHeightForGrid(gridView);
setWidthForGrid(gridView);
}
});

Jason R. Craig
27 Jul 2015, 7:54 AM
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-manageHeight


Ext version tested:

Ext 4.2.0.663


Browser versions tested against:

Firefox
IE8
IE9


Description:

A horizontal scrollbar does not appear in a grid panel when the contents of the panel is larger than the panel itself unless a height is set on panel
Related to the first point, a horizontal scrollbar does not appear in a grid panel even if a height is set unless data exists in the panel. This behavior does not allow users to view the headers names of columns without data in the grid


Steps to reproduce the problem:

Used the example grid and store from the ExtJS 4.1.0 and 4.2 documentation (same example). Made the width of the grid smaller so all fields cannot be seen without scrolling. I then commented out the height configuration and noticed that the horizontal scrollbar does not appear in the 4.2 version of ExtJS
Removing the store configuration from the grid prevents the horizontal scrollbar from appearing as well, even if a height is configured
AutoScroll: true or OverflowX: scroll/auto does not resolve these issues


The result that was expected:

The horizontal scrollbar should be present when the fields of a grid overflows the grids width and the user has specified that the contents should not be cut off (via autoScroll or overflowX). The height of the grid or the fact whether records are in the grid should not be a factor of whether the horizontal scrollbar appears


The result that occurs instead:

The only way to show the horizontal scrollbar is to specify a static height on the grid panel. This is not viable option when dynamic heights are needed for components, or if the user wants the height of the grid to be changed as data comes in and out of the component
When no data is in the grid, the horizontal scrollbar cannot be seen/used, which hides column headers from the user.


Test Case:
This example was taken from the ExtJS documentation. ExtJS 4.1.0 shows a scrollbar, but 4.2.0 does not. As you can see, data is cut off and not easily accessible without the horizontal scroll.


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'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
// height: 200,
width: 200,
autoScroll: true,
renderTo: Ext.getBody()
});


Even with a height set, if no data exists in the grid, a horizontal scrollbar cannot be used.

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'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
// store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 200,
autoScroll: true,
renderTo: Ext.getBody()
});


Both autoScroll and overflowX configs do not solve this issue

Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

only default ext-all.css


Operating System:

Windows 7

Jason R. Craig
27 Jul 2015, 7:56 AM
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-manageHeight

Ext.panel.Panel
view source (http://docs.sencha.com/extjs/4.2.1/source/Panel6.html#Ext-panel-Panel-cfg-manageHeight)
manageHeight (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-manageHeight) : Boolean (http://docs.sencha.com/extjs/4.2.1/#!/api/Boolean)

When true, the dock component layout writes height information to the panel's DOM elements based on its shrink wrap h...
When true, the dock component layout writes height information to the panel's DOM elements based on its shrink wrap height calculation. This ensures that the browser respects the calculated height. When false, the dock component layout will not write heights on the panel or its body element. In some simple layout cases, not writing the heights to the DOM may be desired because this allows the browser to respond to direct DOM manipulations (like animations).
Defaults to: true
Available since: 4.1.0