1. #1
    Sencha User
    Join Date
    Jul 2010
    Location
    Russia, Yekaterinburg
    Posts
    8
    Vote Rating
    0
    isqad88 is on a distinguished road

      0  

    Default Fix a bug with the slipping lines in the grid with frozen columns

    Fix a bug with the slipping lines in the grid with frozen columns


    When you use the grid with frozen columns carry the words in the cells, you may show upwhen scrolling bug when part ofthe frozen columns of slippeddown relative to the normal grid.
    I found away to correct this phenomenon in version 4.0.7.

    PHP Code:
    /**
    * Css style
    */
    .hack-scroll table.x-grid-table 
      
    margin-bottom18px !important;
    }
    /**
    * word-wrap
    */
    .x-column-header-inner .x-column-header-text, .x-grid-cell-inner {    
      
    white-spacepre-wrap !important;

    PHP Code:
    //at grid with locked columns, and word-wrap at cell
    //...
    listeners: {         
      
    afterrender: function(cmp){                              
        
    cmp.normalGrid.on('scrollershow', function(scrollerorientation) {                         if (orientation == 'vertical')  { 
        
    cmp.lockedGrid.addCls('hack-scroll');                        
    }                    
    });                    
        
    cmp.normalGrid.on('scrollerhide', function(scrollerorientation) {                            if(orientation == 'vertical') { 
        
    cmp.lockedGrid.removeCls('hack-scroll');                     
    }                    
    });
    }
    }
    //... 

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to Ext JS 4 forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Location
    Russia, Yekaterinburg
    Posts
    8
    Vote Rating
    0
    isqad88 is on a distinguished road

      0  

    Default Update of reason this issue

    Update of reason this issue


    Just yesterday, found a right decision.
    Let's imagine that you need to show grid with few locked columns and you have some css for word-wraping in cells:

    Code:
    .x-column-header-inner {
        line-height: normal;
        white-space: normal;
        .x-column-header-text {
          white-space: normal;
        }
      }
    But here there is a bug associated with the incorrect calculation of the height of the rows when their synchronization - locked grid and normal.

    First, you must disable the core synchronization.

    Code:
    # CoffeeScript
    # In your Controller
    
    afterrender: (grid) ->
    
    
              Ext.override(Ext.view.TableLayout,
                finishedLayout: () ->
                  @lockedGrid.syncRowHeight = false if @lockedGrid
                  @callParent(arguments)
              )
    Here is a coffeescript. Overriding the need to call it after a render grid.

    Then we hang up an event handler to refresh that after refreshing the grid will be recalculated and synchronize the height of the grid-locked columns and normal grid. Make it so that this handler is invoked only once, not every time refreshment. Experience I have determined that this event is call 2 + 2 times after a render grid and then 1 + 1 at the transition between pages or updating store grid for each part - locked and normal.

    Code:
    # CoffeeScript
    
    @refreshListener = grid.getView().on("refresh", (viewGrid) ->
                if countRefresh == 3
                  grid = viewGrid.ownerCt.ownerCt
    
    
                  @syncGridRowsHeights(grid)
    
    
                  @refreshListener.destroy()
                  @refreshListener = null
                  countRefresh = 0
    
    
                  @refreshListener = grid.getView().on("refresh", (viewGrid) ->
                    if countRefresh == 1
                      grid = viewGrid.ownerCt.ownerCt
                      @syncGridRowsHeights(grid)
                      countRefresh = 0
                    countRefresh++
                  , that, destroyable: true)
    
    
                countRefresh++
    
    
              , @, destroyable: true)
    Sorry for such a smell code. He needs refactoring, but it is working))

    Now it is a synchronization method.

    Code:
    # CoffeeScript
    
    syncGridRowsHeights: (grid) ->
        lockedView = grid.lockedGrid.getView()
        normalView = grid.normalGrid.getView()
        lockedRowEls = lockedView.all.slice()
        normalRowEls = normalView.all.slice()
    
    
        ln = lockedRowEls.length
    
    
        i = 0
        while i < ln
          lockedGridRow = Ext.get(lockedRowEls[i])
          normalGridRow = Ext.get(normalRowEls[i])
    
    
          lockedRowHeight = lockedGridRow.dom.offsetHeight
          normalRowHeight = normalGridRow.dom.offsetHeight
    
    
          if lockedRowHeight > normalRowHeight
            normalGridRow.setHeight(lockedRowHeight)
          else if normalRowHeight > lockedRowHeight
            lockedGridRow.setHeight(normalRowHeight)
    
    
          i++
    Do not forget also about the events unlocking and locking columns))

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    43
    Vote Rating
    2
    agunescu is on a distinguished road

      0  

    Default


    Hi, I am trying to use this fix but I can't figure it out how...can you please attach a complete example? I have a grid with locked cols, the same scrolling problems, the rows go out of sync and I also have a word wrap. I am using ExtJS 4.1.1

Thread Participants: 2