Ext Js grid scroll bars issue in Firefox//Chrome
My first post. Here it goes.
I am using Ext Js 4.0. All the code is attached.
I have a page with two tabs, one called as "Basic" and the other "Advanced". Basic tab has pure html table no Ext JS component and Advanced tab has Ext JS grid, which is rendered only on a the first click of the Advanced tab (deferred rendered). Everything is working great in IE 7. However, in firefox 4.0 or chrome 13.0 the grid rendered in Advanced tab doesn't have(can't see) the horizontal/vertical scrollbars to view additional columns or rows. The above is the behaviour when in server environment.
To post the above issue in forum, I stripped down all the server related code and tried to get the working version and post the code to get some help. But, to my surprise the grid doesn't show up in Firefox entirely but shows up in IE7. Below is the code.
Code for the tabs.html
Code for the grid.htmlCode:<html> <head> <title>Basic/Advanced</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; } ul#tabs li { display: inline; } ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; } ul#tabs li a:hover { background-color: #f1f0ee; } ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; } div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; } div.tabContent.hide { display: none; } </style> <script type="text/javascript"> //<![CDATA[ var tabLinks = new Array(); var contentDivs = new Array(); function init() { tabLinks["basic"]=document.getElementById("basicId"); tabLinks["advanced"]=document.getElementById("advancedId"); contentDivs["basic"]=document.getElementById( "basic" ); contentDivs["advanced"]=document.getElementById( "advanced" ); for ( var id in tabLinks ) { tabLinks[id].onclick = showTab; tabLinks[id].onfocus = function() { this.blur() }; } tabLinks["basic"].className='selected'; contentDivs["advanced"].className='tabContent hide'; } function renderGridAjaxly(){ $.ajax({ type: "GET", url: "grid.html", success: function(msg){ $("#advanced").html(msg); }, error: function(){ $("#advanced").html('<div id="ldetailsgrid"><h3 class="highlight">Not currently available.</h3></div>'); }, timeout: 7000 }); } var gridRendered = false; function showTab() { var selectedId = getHash( this.getAttribute('href') ); // Highlight the selected tab, and dim all others. // Also show the selected content div, and hide all others. for ( var id in contentDivs ) { if ( id == selectedId ) { tabLinks[id].className = 'selected'; contentDivs[id].className = 'tabContent'; if(!gridRendered && (id == 'advanced')){ renderGridAjaxly(); gridRendered = true; } } else { tabLinks[id].className = ''; contentDivs[id].className = 'tabContent hide'; } } // Stop the browser following the link return false; } function getHash( url ) { var hashPos = url.lastIndexOf ( '#' ); return url.substring( hashPos + 1 ); } //]]> </script> </head> <body onload="init()"> <ul id="tabs"> <li><a id="basicId" href="#basic">Basic</a></li> <li><a id="advancedId" href="#advanced">Advanced</a></li> </ul> <div id="basic"> <table cellpadding="0" cellspacing="0" width="100%" border="2px"> <thead> <tr> <th rowspan="2">A column</th> <th rowspan="2">B column</th> <th rowspan="2">C column</th> <th rowspan="2">D column</th> <th rowspan="2">E column</th> <th rowspan="2">F column</th> </tr> </thead> <tbody> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> </tr> </tbody> </table> </div> <div id="advanced"></div> </body> </html>
scrollbar.zipCode:<html> <head> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script src="ext-all.js"></script> <script> Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*' ]); //sample static data for the store. var data = [['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'], ['AAA','BBB','CCC','DDD','EEE','FFF','GGG']]; //create a data store var store = Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'A'}, {name: 'B'}, {name: 'C'}, {name: 'D'}, {name: 'E'}, {name: 'F'}, {name: 'G'} ], data: data }); function showGrid() { // create the Grid var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'A Column', width: 60, dataIndex: 'A' }, { text : 'B Column', width : 58, dataIndex: 'B' }, { text : 'C Column', width : 48, dataIndex: 'C' }, { text : 'D Column', width : 58, dataIndex: 'D' }, { text : 'E Column', width : 70, dataIndex: 'E' }, { text : 'F Column', width : 70, dataIndex: 'F' }, { text : 'G Column', width : 70, dataIndex: 'G' } ], stripeRows: false, renderTo: 'grid', height: 300, width:200 }); }; showGrid(); </script> </head> <body> <div id="grid"></div> </body> </html>
Scroll bars working in IE.
IE_Working.JPG
Scroll bars not working in Firefox
Firefox_Notworking.JPG
Reply With Quote
