1. #1
    Sencha User
    Join Date
    Nov 2008
    Location
    Tehran, Iran
    Posts
    11
    Vote Rating
    0
    PATMAP is on a distinguished road

      0  

    Default Maximum Width For Resizing Locked Column

    Hi,

    I think the Grid locked column(s) must be have a maximum width for resizing (Grid.width - VerticalScrollBar.width).
    Because when you want to resize locked column more than grid width then you cant see other columns after resizing. Now, if you click on resized column then grid auto scroll to resized width and cannot comeback.
    And now, if you double click in resizable vertical column line then this column auto resized and all column disappear from grid.

    LG1.pngLG2.pngLG3.pngLG4.png


    I test this sample on: Locking Grid Column Example (RTL and LTR mode)

    Regards

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,165
    Vote Rating
    1252
    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

    What happens when you have a locked column(s) is you have two grids in an hbox layout basically. So you only have the total width to view the grids of the parent panel. So if the parent grid panel has a width of 400 and the left inner grid has a width of 400, then you have 0 for the right inner grid.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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
    Nov 2008
    Location
    Tehran, Iran
    Posts
    11
    Vote Rating
    0
    PATMAP is on a distinguished road

      0  

    Default

    Hi Mitchell

    Thank you for your answer,

    When the locked columns can be resized with mouse, i do resize column width to out of grid then i expect to resize again to default size with mouse, but i cant comeback to first size. and must be i do refresh browser, and this is not good solution.

    Regards

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,013
    Vote Rating
    182
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default

    +1 for this, shouldn't be possible to mess up the grid like that.

  5. #5
    Sencha User manojmoktan's Avatar
    Join Date
    Feb 2014
    Location
    Kathmandu, Nepal
    Posts
    8
    Vote Rating
    0
    manojmoktan is on a distinguished road

      0  

    Default while i locked grid column column resize not work properly

    I have locked the grid columns even i have made resizable:true
    in locked column property but locked columns don't resize while resize column it decrease column
    width auto,
    so anyone please help me . Thanks in advance.

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    15
    Vote Rating
    0
    eweiler is on a distinguished road

      0  

    Default

    EDIT: Replied to this old thread but I am using Ext 6.0.1

    I have a locked grid where only one column can be on the locked side. For that scenario, I added a resize listener on the locked grid to resize the single column. I also set resizable to true on the locked grid and resizable to false on the locked column.

    The same approach could be taken with more columns and a little math but it gets more complex because you have to allow resize on the columns themselves. I wonder if anyone else 'solved' this for the scenario where a locked side of a grid has 5 columns where only 3 show by default.

    As mentioned above, it seems like if you resize columns with state management turned on and then refresh the browser, the locked grid may become the width of the columns as you expected. I tried to add a grid view refresh on the column resize listeners, but that didn't seem to work either. Perhaps just setting the width of the locked grid (but how to do that, brb ).

    Here is sample code for a locked grid with only one locked column that should sync the width of the locked grid and the locked column.

    Code:
    lockedGridConfig : {      width : 250,
          resizable : true,
          listeners : {
            resize : function(grid, width, height, oldWidth, oldHeight) {
              me.down('#mySingleLockedColumn').setWidth(width - 1);
            }
          }
    Code:
    columns : [{
          text : 'Factor',
          itemId : 'mySingleLockedColumn',
          locked : true,
          width : 350,
          resizable : false,
          hideable : false,
          dataIndex : 'factor'
        }.....]

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    15
    Vote Rating
    0
    eweiler is on a distinguished road

      0  

    Default

    EDIT: Replied to this old thread but I am using Ext 6.0.1.

    I like the way I have this working for multiple columns now. The same approach could have been taken for the single locked column grid. This is how I would expect the locked grid to behave if there was a config called something like "autoFitLockedGridToTotalWidthOfVisibleLockedColumn" or "autoFit" but that could cause some confusion as this sort of functions the opposite of forceFit.

    The listeners for column resize and column hide on the grid give you the header container so it is easy to get a handle on the locked grid when the column is locked.

    Code:
      initComponent : function() {
        var me = this;
        me.lockedGridConfig = me.buildLockedGridConfig();
        me.columns = me.buildColumns();
        me.plugins = me.buildPlugins();
        me.callParent(arguments);
    
    
        me.on({
          scope : me,
          columnresize : me.onColumnChanges,
          columnshow : me.onColumnChanges,
          columnhide : me.onColumnChanges
        });
      },
      
      buildLockedGridConfig : function() {
        var me = this;
        
        return {
          width : 350,
          resizable : false
        };
      },
      
      onColumnChanges : function(container, column) {
        if (column.locked) {
          var me = this;
          var lockedColumns = container.grid.getColumns();
          var totalWidth = 0;
    
    
          Ext.each(lockedColumns, function(col) {
            if (!col.hidden) {
              totalWidth += col.width;
            }
          });
          container.grid.setWidth(totalWidth + 1);
        }
      },