StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POExtJS 4 - Scrollbar display issues in chrome with a google maps instance and grid in a border layout together
text
Body
copied!<p>I'm using ExtJS 4 and I have a viewport with a border layout. The center region contains a panel while the south region contains a grid. When the panel is rendered it has a google maps instance rendered to its body. I've made the south region (grid) collapsible. </p> <p>This all works and looks fine, but when you collapse the south region, the grid's scrollbars are not hidden. They hide momentarily as the grid is animating the collapse, but after that they reappear. This problem occurs in Chrome but does not occur in Firefox.</p> <p>See my jsFiddle for an example: <a href="http://jsfiddle.net/WUeWb/4/" rel="nofollow">http://jsfiddle.net/WUeWb/4/</a></p> <p>If you un-comment out line 82, preventing the map from being rendered, everything works fine. So there is definitely something related to the google maps instance that is messing things up, but I can't figure out what it is. Any help would be greatly appreciated. </p> <p>EDIT: Here's a jsFiddle using the GMapPanel extension: <a href="http://jsfiddle.net/WUeWb/5/" rel="nofollow">http://jsfiddle.net/WUeWb/5/</a>. Scrollbar problem persists.</p> <p>Thanks!</p> <pre><code>Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('Ext.ux', '../ux/'); Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ModelManager', 'Ext.tip.QuickTipManager']); Ext.onReady(function () { Ext.tip.QuickTipManager.init(); Ext.define('ForumThread', { extend: 'Ext.data.Model', fields: [ 'title', 'forumtitle', 'forumid', 'username', { name: 'replycount', type: 'int' }, { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' }, 'lastposter', 'excerpt', 'threadid'], idProperty: 'threadid' }); var store = Ext.create('Ext.data.Store', { pageSize: 50, model: 'ForumThread', proxy: { type: 'jsonp', url: 'http://www.sencha.com/forum/topics-browse-remote.php', reader: { root: 'topics', totalProperty: 'totalCount' } } }); var grid = Ext.create('Ext.grid.Panel', { height: 300, title: 'Grid in south panel - ' + Ext.getVersion().version, store: store, loadMask: true, columns: [{ text: "Topic", dataIndex: 'title', width: 200 }, { text: "Author", dataIndex: 'username', width: 300 }, { text: "Replies", dataIndex: 'replycount', width: 370 }, { text: "Last Post", dataIndex: 'lastpost', width: 650 }], bbar: Ext.create('Ext.PagingToolbar', { store: store }), region: 'south', collapsible: true }); Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'center', title: 'Center panel', listeners: { boxready: function (t) { //return; //uncomment this to prevent map from being added. grid will then collapse correctly var myOptions = { zoom: 2, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.TERRAIN }; t.gmap = new google.maps.Map(t.body.dom, myOptions); }, resize: function (t) { if (Ext.isDefined(t.gmap)) { google.maps.event.trigger(t.gmap, 'resize'); } } } }, grid] }); store.loadPage(1); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload