Code:
Changed EXTJS Line #337 from:
.x-grid3-header-offset{padding-left:1px;width:10000px;}
to
.x-grid3-header-offset{padding-left:1px;width:auto;}
The change fixed the grid being 10* the size of the viewport, and also made the header the same size as the columns. With some playing aorund this also only worked in combination when the grid was in a container, otherwise the body of the table would still overflow.
Code:
var container = new Ext.Container({applyTo: element_id,
layout: 'fit',
items: this.grid});
Now the issue is that the grid pushes out it's container and expands to it's full size instead of scrolling inside the grid:
Code:
|CONTAINER| (the grid extends the width of the container)
|-GRID---------|
instead of:
|CONTAINER|
|--GRID---| (with scrollbars on the grid)
In firefox/safari everything is as normal