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
    8,778
    Vote Rating
    240
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      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.


    Join me at SenchaCon 2016!

  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
    8,778
    Vote Rating
    240
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      0  

    Default

    My understanding is that Ext 5 will release before 4.2.3 and should have the fix as well, if that helps.


    Join me at SenchaCon 2016!

Thread Participants: 1

Tags for this Thread