Maximum Width For Resizing Locked Column

[PATMAP]

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

[mitchellsimoens]

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.

[PATMAP]

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

[mankz]

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

[manojmoktan]

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.

[eweiler]

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.

lockedGridConfig : {      width : 250,
      resizable : true,
      listeners : {
        resize : function(grid, width, height, oldWidth, oldHeight) {
          me.down('#mySingleLockedColumn').setWidth(width - 1);
        }
      }

columns : [{
      text : 'Factor',
      itemId : 'mySingleLockedColumn',
      locked : true,
      width : 350,
      resizable : false,
      hideable : false,
      dataIndex : 'factor'
    }.....]

[eweiler]

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.

  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);
    }
  },