You found a bug! We've classified it as EXTJS-10959 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Vote Rating
    5
    jkyoutsey is on a distinguished road

      0  

    Default Grouped Grid with long group text doesn't style right when scrolled

    Grouped Grid with long group text doesn't style right when scrolled


    Here is a working code example. When you have a grouped grid where the text in the group header is longer than the width of the grid and you scroll to see the rest the rows in the grid are no longer styled. It looks terrible.
    Unscrolled:
    issue.png

    Scrolled:
    issue_scrolled.png

    Code:
    <html>
    <head>
       <script type="text/javascript" src="./extjs-4.2/ext-all-debug-w-comments.js"></script>
       <link rel="stylesheet" type="text/css" href="./extjs-4.2/resources/css/ext-all.css">
    <script>
    Ext.onReady(function () {
       var data = {
          "data" : [
             { "col1" : "lorem", "col2":"Some Really Long Text That Is Longer Than The Width Of The Window Creates This Issue." },
             { "col1" : "ipsum", "col2":"Some Really Long Text That Is Longer Than The Width Of The Window Creates This Issue." },
             { "col1" : "dolor", "col2":"Some Really Long Text That Is Longer Than The Width Of The Window Creates This Issue." },
             { "col1" : "ipsum", "col2":"b" },
             { "col1" : "lorem", "col2":"b" },
             { "col1" : "dolor", "col2":"b" }
          ]
       };
       
       var store = Ext.create('Ext.data.JsonStore', {
             storeId: 'theStore',
             autoLoad : true,
             data : data,
             root : 'data',
             fields : ['col1', 'col2'],
             groupField : 'col2',
             proxy : {
                type : 'memory',
                reader : {
                   type : 'json',
                   root : 'data'
                }
             }
          });
       
       Ext.create('Ext.Window', {
          modal : true,
          layout : 'fit',
          width : 400,
          height : 400,
          closable : false,
          title : 'title',
          buttons : [{
                id : 'saveButton',
                text : 'save'
             }, {
                text : 'close'
             }],
          layout : {
             type : 'vbox',
             align : 'stretch'
          },
          items : [{
                xtype : 'grid',
                store : store,
                flex : 1,
                margin : '5, 10, 10, 10',
                features : [{ftype : 'grouping'}],
                columns : [{
                      header : 'col1',
                      dataIndex : 'col1',
                      flex : 1
                   }]
             }]
       }).show();
    });
    </script>
    </head>
    <body>
    </body>
    </html>

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,847
    Vote Rating
    68
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1

Tags for this Thread