Results 1 to 2 of 2

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

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      0  

    Default 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
    10,360
    Vote Rating
    262
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •