Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: Visible rows in livegrid don't match the number displayed in toolbar

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #11
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    I can try to run this, but it doesn't seem to be a complete example. That custom appearance and css could be setting styles globally that are breaking the other grid, and with your description of the bug (i.e. only occurs after viewing the other grid) that sounds very much like the case. If I don't have Page1, will I be able to see this bug? Can you make a simple version of Page1 and still get the bug? If not, that seems to be the source of the issue, or at the very least, an essential piece of the puzzle.

    The 'wrong' DateCell causes this bug for a fairly simple reason - it is adjusting the size of the row height, so the LiveGridView can't assume it knows how tall any given row is. LiveGridView assumes a row height of 20 px - this is customizable via setRowHeight:
    Code:
      /**
       * Sets the height of one row (defaults to 20). <code>LiveGridView</code> will
       * only work with fixed row heights with all rows being the same height.
       * Changing this value will not physically resize the row heights, rather, the
       * specified height will be used internally for calculations.
       * 
       * @param rowHeight the new row height.
       */
      public void setRowHeight(int rowHeight) {
        this.rowHeight = rowHeight;
      }
    Note the last sentence - changing this will not modify the grid rows, but this can be used to inform the grid view how tall the rows are. The rows *must* be the same height in order to allow the livegrid to 'guess' at the heights of the rows above and below the current visible area - the ones it cannot see.

    Without more information, my guess is that Page1's appearance is changing the height of all grids, and breaking this assumption. While there are issues with Grid appearances affecting other grid, I think it should be possible for one grid to set its own row height as different from other grids on the page.

    Perhaps instead of adding more code (this last post added something around 200 lines on top of the existing 300 of my simplified version of your initial copy), you could break this into a reproducible test case? I will try to run it, but as I said before, you are mixing and matching so many components that singling out a specific mistake in your code or bug in ours is getting very difficult. If the bug still happens without layouts, make the layout much much simpler - and if it doesn't, then the Grid probably isn't even necessary to reproduce it. Just draw two grids, side by side - perhaps two buttons, each that adds a grid. If I am correct, adding Page1 will change the live grid after it is already drawn, and you'll be able to see that change happen.

  2. #12
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    27

    Default

    Here are our own GridAppearance and css used by Page1.java:

    MyGridAppearance.java:

    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.CssResource.Shared;
    import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance;


    public class MyGridAppearance extends GridBaseAppearance {


    public interface MyGridResources extends GridResources {
    MyGridResources INSTANCE = GWT.create(MyGridResources.class);


    @Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "MyGrid.css" })
    @Override
    MyGridStyle css();
    }


    @Shared
    public interface MyGridStyle extends GridStyle {


    @Override
    String cell();

    String onDark();


    @Override
    String row();


    @Override
    String rowBodyRow();


    @Override
    String rowHighlight();


    @Override
    String rowOver();


    @Override
    String rowWrap();


    @Override
    String rowSelected();


    @Override
    String scroller();
    }


    public MyGridAppearance() {
    super(MyGridResources.INSTANCE);
    }
    }

    MyGrid.css file:
    .cell {
    background-color: none !important;
    background: none !important;
    border: 0px solid transparent;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-bottom-width: 1px;
    border-bottom-color: rgba(204, 204, 204, 0.6) !important;
    vertical-align: middle;
    font: 12px segoe ui, tahoma, arial, sans-serif;
    }


    .cellInner {
    line-height: 20px !important;
    }


    .columnLines .cell {
    border-right: 0px solid;
    }


    .footer {
    background: transparent;
    border-top: none;
    border-bottom: none;
    display: block;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    }


    .rowWrap {
    border-style: solid !important;
    border-width: 0px !important;
    border-bottom-width: 1px !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: rgba(204, 204, 204, 0.6) !important;
    }


    .rowOver .rowWrap .cell, .rowSelected .rowWrap .cell {
    background-color: transparent !important;
    background: none !important;
    border-bottom-color: transparent !important;
    border-bottom: 0px solid transparent !important;
    }


    /** under rowWrap and cell **/
    .row:first-child .cell, .row:first-child .rowWrap, .rowWrap .cell{
    border-botttom-color: transparent !important;
    }


    .rowHighlight, .rowSelected {
    border-width: 0px;
    background-color: transparent !important;
    background: none !important;
    }


    .rowOver .cell, .rowOver .rowWrap {
    border-width: 0px;
    background-color: transparent !important;
    background: #b3bcc4 !important;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
    cursor: pointer;
    border-bottom-color: rgba(204, 204, 204, 0.6) !important;
    color: #333;
    }


    .rowSelected .cell, .rowSelected .rowWrap {
    background: literal("linear-gradient(#66abd1, #2488bc)") !important;
    background: literal("-webkit-gradient(linear, left top, left bottom, color-stop(0%, #66abd1), color-stop(100%, #2488bc))") !important;
    background: literal("-moz-linear-gradient(top, #66abd1 0%, #2488bc 100%)") !important;
    color: #fff;
    border-color: transparent !important;
    border-width: 0px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
    border-style: solid !important;
    border-bottom-color: rgba(204, 204, 204, 0.6) !important;
    }


    .onDark .rowSelected .cell, .rowSelected .rowWrap {
    background-color: #2387bc !important;
    color: #fff;
    border-color: transparent !important;
    border-width: 0px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
    border-style: solid !important;
    border-bottom-color: rgba(204, 204, 204, 0.6) !important;
    }


    .scroller {
    background-color: transparent !important;
    background: none !important;
    }

    MyGridView.java:

    Grid in Page1.java:
    GridView<GridSample> myGridView = new GridView<GridSample>(new MyGridAppearance());

  3. #13
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    At a glance, I'd guess that this is the line:
    Code:
    .cellInner {
        line-height: 20px !important;
    }
    Nothing else jumps right out at me, but again, since this *only* happens after drawing that grid, it seems to suggest that something here is the problem.

    But in order to test, I will need to set up a full project for this. Have you tested any of the comments I made? Did you come to any results that shed any light on this?

  4. #14
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    This is looking likely as the issue - from the default Grid.css file:
    Code:
    .cellInner {
      overflow: hidden;
      padding: 4px 3px 3px 5px;
      line-height: 13px;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
    }
    As you are setting this taller than expected, the LiveGridView's expectation of each grid row height is incorrect. One option is to apply this same change (line-height:20px) to all grids, and inform the LiveGridView of the corrected row height, another is described below.

    GXT 3.0's Grid appearances do not play well when more than once grid appearance is used within a single app. This is a defect we have logged, but unfortunatly it will require API-breaking changes in the grid appearance to fully rectify, so it must wait until 3.1. This is discussed in more depth at http://www.sencha.com/forum/showthread.php?255509.

    One way to deal with this - add a new class name, unique to that appearance, and apply that class name to the grid, then reference it in your css file to qualify specific changes that should apply only to that grid.

  5. #15
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    27

    Default

    Thanks for your detailed information.
    Adding the following two lines to MyGridAppearance.MyGridStyle:
    @Override
    String cellInner();

    This fixes the problem.

    -Sharon

  6. #16
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    Thanks for the update - I've closed this issue. If you happen to find another way to reproduce it (other posters mentioned that they also had this issue), please reply and I'll take a look at your test cases.

  7. #17

    Default

    Hello,

    i have stumbled on something if not downright identical then at least very similar.

    Problem is reproducible on current Sencha example site, using LiveGrid demo in particular.

    Steps to reproduce:
    1. Open LiveGrid demo.
    2. Use grid's vertical scrollbar to reach the bottom most visible item. Make sure you can't scroll down any further.
    3. Click on the bottom most visible item to select it.
    4. Press down arrow key multiple times. Meet and explore new bottom most items that have been unreachable just a moments ago using vertical scrollbar method.

    Experienced on IE11 and FF26. GXT 3.1-beta with Neptune theme.

    For reference, GXT 3.0.1 wasn't affected by such problem.

    Cheers,
    Tomas

  8. #18
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    Thanks, this has also been filed at http://www.sencha.com/forum/showthread.php?274874, and we'll update that thread with progress on this issue.

  9. #19

    Default

    More findings on issue reported above (may not be the same as OP):

    It only happens on GXT 3.1-beta with Neptune Theme. Blue Theme and Gray Theme behave correctly in that specific regard. Just verified at
    http://www.sencha.com/examples/explo...Place:livegrid
    and
    http://qa.sencha.com:8080/examples-d...Place:livegrid

    Tomas

Page 2 of 2 FirstFirst 12

Posting Permissions

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