Extjs - vertical header in grid and locked columns

A while ago I wrote an article where I described how to create a plugin, which can flip header of Ext.panel.Grid vertically. I’ve been using this plugin for a couple of months in a company I work for, however in the last week it turned out that this extension does not work for grid with locked columns. After digging into Extjs source code I found out that when You use locked columns, the grid is created as a combination of two grids: normalGrid and lockedGrid. Therefore it is necessary to apply vertical-header plugin to these two grids separately. In order to do that, I improved this extension to detect if grid has locked columns or not. The main change is in init function which now looks that way

1
init: function (grid) {
2
      var me = this;
3
      me.grid = grid;
4
      me.grid.addCls('v-vertical-header-grid');
5
      me.textMetric = new Ext.util.TextMetrics();
6

7
      if (me.isLocked()){
8
          var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),
9
              lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);
10
              normalGridPlugin.init(me.grid.normalGrid);
11
              lockedGridPlugin.init(me.grid.lockedGrid);
12
              me.grid.normalGrid.plugins.push(normalGridPlugin);
13
              me.grid.lockedGrid.plugins.push(lockedGridPlugin);
14
      } else {
15
          me.grid.on({
16
              afterlayout: {
17
                  scope: me,
18
                  fn: me.handleAfterLayout
19
              }
20
          });
21
      }
22
}

In the first step I check if columns are locked. The method for do that is pretty straightforward

1
isLocked: function () {
2
          var me = this;
3
          return me.grid.normalGrid && me.grid.lockedGrid;
4
}

Afterward I do create two instances of vertical-header plugin and initialize them with appropriate partial grid (lockedGrid or normalGrid). Entire code listing is presented below

1
Ext.define('GeneralLearning.ux.VerticalHeader', {
2
    alias: 'plugin.verticalheader',
3
    grid: null,
4
    extraCfg:null,
5
    textMetric: null,
6
    init: function (grid) {
7
        var me = this;
8
        me.grid = grid;
9
        me.grid.addCls('v-vertical-header-grid');
10
        me.textMetric = new Ext.util.TextMetrics();
11

12
        if (me.isLocked()) {
13
            var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),
14
                lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);
15
                normalGridPlugin.init(me.grid.normalGrid);
16
                lockedGridPlugin.init(me.grid.lockedGrid);
17
                me.grid.normalGrid.plugins.push(normalGridPlugin);
18
                me.grid.lockedGrid.plugins.push(lockedGridPlugin);
19

20
        } else {
21
            me.grid.on({
22
                afterlayout: {
23
                    scope: me,
24
                    fn: me.handleAfterLayout
25
                }
26
            });
27
        }
28
    },
29

30
    constructor: function (cfg) {
31
        var me = this;
32
        me.extraCfg = cfg;
33
        Ext.apply(this, cfg);
34
        me.callParent(arguments);
35
    },
36

37
    handleAfterLayout: function (cmp) {
38
        var me = this,
39
            maxWidth = 0,
40
            headerItems = cmp.headerCt.items,
41
            curremtWidth;
42

43
        headerItems.each(function (item) {
44
            if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {
45
                maxWidth = curremtWidth + 10;
46
            }
47
        });
48

49
        cmp.headerCt.el.select('.x-column-header-text').each(function (el) {
50
            el.setSize(maxWidth, maxWidth);
51
        });
52
    },
53

54
    isLocked: function () {
55
        var me = this;
56
        return me.grid.normalGrid && me.grid.lockedGrid;
57
    }
58

59
});

Source code for this post can be found here