Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Houston, TX, USA
    Posts
    25
    Vote Rating
    2
    keithhackworth is on a distinguished road

      0  

    Default overflowY on grid doesn't apply to headers

    Ext version tested:
    • Ext 4.2.1
    Browser versions tested against:
    • FF 21.0.1, IE 10
    DOCTYPE tested against:
    • html5 (<!DOCTYPE html>) and in quirks mode (no DOCTYPE defined)
    Description:
    • I have 2 grids on the same page. The top is a summary where a user can click an item and the below grid shows the details. The grids contain the same columns. The top grid is too long, so it puts a scroll bar on it. The bottom grid loads no data by default, so no scroll bars are needed, which causes my headers to be 'off'. I added "overflowY: 'scroll'" to force the scroll bars to be there. It adds the space to the grid data portion, but it doesn't shift the headers like it does when you have a 'real' scroll bar. See screenshot for an example.
    Steps to reproduce the problem:
    • Build a gridpanel. Add an "overflowY: scroll" parameter.
    The result that was expected:
    • In the headers, normally when you have a grid with a scroll bar, it adds a 'column' above the scroll bars that's the same width as the scroll bars.
    The result that occurs instead:
    • With "overflowY: 'scroll'" it doesn't add this 'column', so the headers don't shift.


    Here's some sample code:
    Code:
    <!DOCTYPE html> <head>      <link rel="stylesheet" type="text/css" href="/js/ext-4.2.1/resources/ext-theme-gray/ext-theme-gray-all.css">     <script type="text/javascript" src="/js/ext-4.2.1/ext-all-debug.js"></script>     <script>      var summaryData = { data: [{"LOB": "commodity", "nonprod_project_prod_db": 1, "nonprod_srcdb_prod_db": 70, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 6, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "core", "nonprod_project_prod_db": 2353, "nonprod_srcdb_prod_db": 2, "prod_but_nonprod_project": 585, "nonprod_but_prod_db": 28, "has_invalid_srcdbs": 78, "harcoded_srcdb_location": 2, "prod_but_nonprod_srcdb": 0}, {"LOB": "corp", "nonprod_project_prod_db": 17, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 2, "nonprod_but_prod_db": 3, "has_invalid_srcdbs": 21, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "cpm", "nonprod_project_prod_db": 60, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 3, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "credit", "nonprod_project_prod_db": 11, "nonprod_srcdb_prod_db": 24, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 205, "has_invalid_srcdbs": 1, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "cva", "nonprod_project_prod_db": 67, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 1, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "em", "nonprod_project_prod_db": 229, "nonprod_srcdb_prod_db": 5, "prod_but_nonprod_project": 30, "nonprod_but_prod_db": 112, "has_invalid_srcdbs": 6, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "equity", "nonprod_project_prod_db": 397, "nonprod_srcdb_prod_db": 11, "prod_but_nonprod_project": 6, "nonprod_but_prod_db": 57, "has_invalid_srcdbs": 1, "harcoded_srcdb_location": 2, "prod_but_nonprod_srcdb": 0}, {"LOB": "etrading", "nonprod_project_prod_db": 49, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 26, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "fi", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 1, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 68, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 4}, {"LOB": "finance", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 2, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "fva", "nonprod_project_prod_db": 10, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "fx", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 4, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 56, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "gmportal", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 4, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "infra", "nonprod_project_prod_db": 32, "nonprod_srcdb_prod_db": 18, "prod_but_nonprod_project": 12, "nonprod_but_prod_db": 15, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 4}, {"LOB": "mis", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 4, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "mtge", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 8, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 26, "has_invalid_srcdbs": 3, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 2}, {"LOB": "ops", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 7, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 172, "has_invalid_srcdbs": 39, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "qar", "nonprod_project_prod_db": 20, "nonprod_srcdb_prod_db": 6, "prod_but_nonprod_project": 13, "nonprod_but_prod_db": 12, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "rates", "nonprod_project_prod_db": 187, "nonprod_srcdb_prod_db": 222, "prod_but_nonprod_project": 38, "nonprod_but_prod_db": 66, "has_invalid_srcdbs": 2, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 12}, {"LOB": "refdata", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 15, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 69, "has_invalid_srcdbs": 5, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "research", "nonprod_project_prod_db": 1, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "risk", "nonprod_project_prod_db": 88, "nonprod_srcdb_prod_db": 41, "prod_but_nonprod_project": 14, "nonprod_but_prod_db": 33, "has_invalid_srcdbs": 44, "harcoded_srcdb_location": 14, "prod_but_nonprod_srcdb": 1}, {"LOB": "sales", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 0, "nonprod_but_prod_db": 4, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}, {"LOB": "xbiz", "nonprod_project_prod_db": 0, "nonprod_srcdb_prod_db": 0, "prod_but_nonprod_project": 1, "nonprod_but_prod_db": 0, "has_invalid_srcdbs": 0, "harcoded_srcdb_location": 0, "prod_but_nonprod_srcdb": 0}] };      Ext.onReady(function() {              summaryStore = Ext.create('Ext.data.JsonStore', {             id: 'summaryStore',                  fields: [{"name": "LOB"}, {"name": "nonprod_project_prod_db"}, {"name": "nonprod_srcdb_prod_db"}, {"name": "prod_but_nonprod_project"}, {"name": "nonprod_but_prod_db"}, {"name": "has_invalid_srcdbs"}, {"name": "harcoded_srcdb_location"}, {"name": "prod_but_nonprod_srcdb"}],              data: summaryData,             proxy: {                 type: 'memory',                 reader: {                     type: 'json',                     root: 'data'                 }             }         });         issuesModel = Ext.define('issuesModel', {             extend: 'Ext.data.Model',             fields: [                 'mode',                 'LOB',                 'srcdb',                 'srcdb_prod_status',                 'invalid_srcdbs',                 'nonprod_project_prod_db',                 'level',                 'srcdb_is_prod',                 'nonprod_srcdb_prod_db',                 'db',                 'project',                 'nonprod_but_prod_db',                 'db_prod_status',                 'command',                 'has_invalid_srcdbs',                 'path',                 'harcoded_srcdb_location',                 'in_prod',                 'project_in_prod',                 'prod_but_nonprod_srcdb',                 'prod_but_nonprod_project',                 'db_is_prod'              ]         });              var issuesStore = Ext.create('Ext.data.ArrayStore', {             model: issuesModel,             storeId: 'issuesStore',             data: []         });                  var summaryGrid = Ext.create('Ext.grid.Panel', {             store: summaryStore,             id: 'summaryGrid',             region: 'center',             columns: [                 { text: 'LOB', flex: 1, dataIndex: 'LOB' },                  {                      text: 'Non-prod<br>srcdb<br>Prod DB',                     width: 60,                     dataIndex: 'nonprod_srcdb_prod_db',                     id:'nonprod_srcdb_prod_db',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Prod But<br>Non-prod<br>Project',                     width: 60,                     dataIndex: 'prod_but_nonprod_project',                     id:'prod_but_nonprod_project',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Non-prod<br>But Prod<br>DB',                     width: 60,                     dataIndex: 'nonprod_but_prod_db',                     id:'nonprod_but_prod_db',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Non-prod<br>Project<br>Prod DB',                     width: 60,                     dataIndex: 'nonprod_project_prod_db',                     id:'nonprod_project_prod_db',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Prod But<br>Non-prod<br>srcdb',                     width: 60,                     dataIndex: 'prod_but_nonprod_srcdb',                     id:'prod_but_nonprod_srcdb',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Harcoded<br>srcdb<br>Location',                     width: 60,                     dataIndex: 'harcoded_srcdb_location',                     id:'harcoded_srcdb_location',                     renderer: function(x) { return x ? x : 0; }                 },                  {                      text: 'Has<br>Invalid<br>srcdbs',                     width: 60,                     dataIndex: 'has_invalid_srcdbs',                     id:'has_invalid_srcdbs',                     renderer: function(x) { return x ? x : 0; }                 }              ]         });              issuesGrid = Ext.create('Ext.grid.Panel', {             store: issuesStore,             id: 'issuesGrid',             region: 'south',             height: 400,             overflowY: 'scroll',             columns: [                 { text: 'LOB', width: 70, dataIndex: 'LOB' },                 { text: 'Object<br>Type', width: 50, dataIndex: 'mode' },                 { text: 'path', width: 50, flex: 1, dataIndex: 'path' },                  {                      text: 'Non-prod<br>srcdb<br>Prod DB',                     width: 60,                     dataIndex: 'nonprod_srcdb_prod_db',                     id:'nonprod_srcdb_prod_db_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Prod But<br>Non-prod<br>Project',                     width: 60,                     dataIndex: 'prod_but_nonprod_project',                     id:'prod_but_nonprod_project_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Non-prod<br>But Prod<br>DB',                     width: 60,                     dataIndex: 'nonprod_but_prod_db',                     id:'nonprod_but_prod_db_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Non-prod<br>Project<br>Prod DB',                     width: 60,                     dataIndex: 'nonprod_project_prod_db',                     id:'nonprod_project_prod_db_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Prod But<br>Non-prod<br>srcdb',                     width: 60,                     dataIndex: 'prod_but_nonprod_srcdb',                     id:'prod_but_nonprod_srcdb_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Harcoded<br>srcdb<br>Location',                     width: 60,                     dataIndex: 'harcoded_srcdb_location',                     id:'harcoded_srcdb_location_issues',                     renderer: function(x) { return x ? x : '-'; }                 },                  {                      text: 'Has<br>Invalid<br>srcdbs',                     width: 60,                     dataIndex: 'has_invalid_srcdbs',                     id:'has_invalid_srcdbs_issues',                     renderer: function(x) { return x ? x : '-'; }                 }              ]         });                  Ext.create('Ext.container.Viewport', {             layout: 'border',             items: [                 issuesGrid,                  summaryGrid             ]         });     });     </script>     </head>     <body></body>
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    7,815
    Vote Rating
    208
    Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold

      0  

    Default

    Thanks for the report. I added your test code to this Fiddle:
    https://fiddle.sencha.com/#fiddle/49c

    I see the issue in 4.2.1 and still in 4.2.2, but when I test against the latest nightly release of 4.2.3, the issue is fixed -- the header spacer appears as expected in the second grid, despite the lack of records.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Houston, TX, USA
    Posts
    25
    Vote Rating
    2
    keithhackworth is on a distinguished road

      0  

    Default

    Thank you for your reply. Is there a patch or something that I can use until 4.2.3 becomes available (which, I would imagine won't be for a while).

  4. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    7,815
    Vote Rating
    208
    Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold

      0  

    Default

    My understanding is that Ext 5 will release before 4.2.3 and should have the fix as well, if that helps.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

Thread Participants: 1

Tags for this Thread