Ext Js grid scroll bars issue in Firefox//Chrome

**neversaydie** · 22 Mar 2012 1:19 PM

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:

<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>

Code for the grid.html

Code:

<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>

scrollbar.zip

Scroll bars working in IE.
IE_Working.JPG

Scroll bars not working in Firefox
Firefox_Notworking.JPG

**mitchellsimoens** · 22 Mar 2012 1:28 PM

4.0.x was plagued with scrolling issues. 4.1.0 has refactored the scrolling which has fixed almost every bug I have seen that relates to scrolling.

**neversaydie** · 22 Mar 2012 1:43 PM

Thanks mitchellsimoens for you reply. Its good to here that 4.1 has all the scrolling issues fixed, but, moving to 4.1 isn't an option. Let wait and see what others have to say.

**neversaydie** · 23 Mar 2012 6:54 AM

Can someone please confirm if it is actually a bug or there is something which I am doing it wrong?

**neversaydie** · 23 Mar 2012 7:14 AM

I replaced by existing ext-all.js with the 4.1 version, similarly replaced the ext-all.css. The grid doesn't show up in IE and Firefox. The javascript errors out "Error: Could not complete the operation due to error 80020101".

**dlowerre** · 13 Apr 2012 4:01 PM

I have been struggling with my own scrolling issue in SensaTouch 2.

I have had only limited success in getting any help at all and have not found an answer.

It looks like scrolling has been a serious issue, but I cannot find anywhere that Sencha has posted a guide to making scrolling work. Wouldn't that be nice?

Seems like Mitchell is the only one answering any questions on this forum. He may be spread a bit too thin to provide support for the entire community.

I am new to using Sencha. I chose it over jquerymobile because it looked like a more mature product. So far I am less than enthused with the docs and the support. Maybe if I paid up it would be better? Is there an answer to this question that 'premium' forum users can find that I cannot?

**mitchellsimoens** · 16 Apr 2012 4:09 AM

@dlowerre Sencha Touch 2 scrolling and Ext JS 4 scrolling are two different things completely.

I'm not the only one anymore, scottmartin patrols Ext JS forums.

**JGALFO** · 12 Sep 2012 3:51 PM

4.1.0 does not seem to have the scrolling issues in Chrome as noted but 4.1.1 has them as well. I could not move to it because of them.

Ext Js grid scroll bars issue in Firefox//Chrome

Thread Tools

Search Thread

Display

Unanswered: Ext Js grid scroll bars issue in Firefox//Chrome

Unanswered: Ext Js grid scroll bars issue in Firefox//Chrome

scary unanswered question

scary unanswered question

4.1.1 has scrolling Issues in chrome as well.

4.1.1 has scrolling Issues in chrome as well.

Tags for this Thread