vertical header

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

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

      if (me.isLocked()){
          var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),
              lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);
              normalGridPlugin.init(me.grid.normalGrid);
              lockedGridPlugin.init(me.grid.lockedGrid);
              me.grid.normalGrid.plugins.push(normalGridPlugin);
              me.grid.lockedGrid.plugins.push(lockedGridPlugin);
      } else {
          me.grid.on({
              afterlayout: {
                  scope: me,
                  fn: me.handleAfterLayout
              }
          });
      }
}

init: function (grid) {

var me = this;

me.grid = grid;

me.grid.addCls('v-vertical-header-grid');

me.textMetric = new Ext.util.TextMetrics();

if (me.isLocked()){

var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),

lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);

normalGridPlugin.init(me.grid.normalGrid);

lockedGridPlugin.init(me.grid.lockedGrid);

me.grid.normalGrid.plugins.push(normalGridPlugin);

me.grid.lockedGrid.plugins.push(lockedGridPlugin);

} else {

me.grid.on({

afterlayout: {

scope: me,

fn: me.handleAfterLayout

}

});

}

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

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

isLocked: function () {

var me = this;

return me.grid.normalGrid && me.grid.lockedGrid;

}

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

Ext.define('GeneralLearning.ux.VerticalHeader', {
    alias: 'plugin.verticalheader',
    grid: null,
    extraCfg:null,
    textMetric: null,
    init: function (grid) {
        var me = this;
        me.grid = grid;
        me.grid.addCls('v-vertical-header-grid');
        me.textMetric = new Ext.util.TextMetrics();

        if (me.isLocked()) {
            var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),
                lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);
                normalGridPlugin.init(me.grid.normalGrid);
                lockedGridPlugin.init(me.grid.lockedGrid);
                me.grid.normalGrid.plugins.push(normalGridPlugin);
                me.grid.lockedGrid.plugins.push(lockedGridPlugin);

        } else {
            me.grid.on({
                afterlayout: {
                    scope: me,
                    fn: me.handleAfterLayout
                }
            });
        }
    },

    constructor: function (cfg) {
        var me = this;
        me.extraCfg = cfg;
        Ext.apply(this, cfg);
        me.callParent(arguments);
    },

    handleAfterLayout: function (cmp) {
        var me = this,
            maxWidth = 0,
            headerItems = cmp.headerCt.items,
            curremtWidth;

        headerItems.each(function (item) {
            if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {
                maxWidth = curremtWidth + 10;
            }
        });

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

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

});

Ext.define('GeneralLearning.ux.VerticalHeader', {

alias: 'plugin.verticalheader',

grid: null,

extraCfg:null,

textMetric: null,

init: function (grid) {

var me = this;

me.grid = grid;

me.grid.addCls('v-vertical-header-grid');

me.textMetric = new Ext.util.TextMetrics();

if (me.isLocked()) {

var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),

lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);

normalGridPlugin.init(me.grid.normalGrid);

lockedGridPlugin.init(me.grid.lockedGrid);

me.grid.normalGrid.plugins.push(normalGridPlugin);

me.grid.lockedGrid.plugins.push(lockedGridPlugin);

} else {

me.grid.on({

afterlayout: {

scope: me,

fn: me.handleAfterLayout

}

});

}

constructor: function (cfg) {

var me = this;

me.extraCfg = cfg;

Ext.apply(this, cfg);

me.callParent(arguments);

handleAfterLayout: function (cmp) {

var me = this,

maxWidth = 0,

headerItems = cmp.headerCt.items,

curremtWidth;

headerItems.each(function (item) {

if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {

maxWidth = curremtWidth + 10;

}

});

cmp.headerCt.el.select('.x-column-header-text').each(function (el) {

el.setSize(maxWidth, maxWidth);

});

isLocked: function () {

var me = this;

return me.grid.normalGrid && me.grid.lockedGrid;

}

});

Source code for this post can be found here

Extjs doesn’t provide us with any build-in mechanism for flipping text vertically in grid’s header. Fortunately we can achieve this effect by using a mixture of CSS rules and some javascript code. In order to make code more reusable, I’ll write it as a plugin for grid. Let’s start from creating CSS rules responsible for text rotation

.v-vertical-header-grid .x-column-header  .x-column-header-text
   {
       display:block;
       margin-left:auto;
       margin-right:auto;
       text-align: left;
       -webkit-transform: rotate(-90deg);     
       -moz-transform: rotate(-90deg);     
       -o-transform: rotate(-90deg);    
       -ms-transform: rotate(-90deg); /* IE  */                             
}

.v-vertical-header-grid .x-column-header .x-column-header-text

{

display:block;

margin-left:auto;

margin-right:auto;

text-align: left;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

-ms-transform: rotate(-90deg); /* IE */

}

.x-column-header .x-column-header-text is a selector for header text in every Extjs grid. It is obvious that we want only certain grids to have vertical headers, that is why I extended selector with additional custom class .v-vertical-header-grid. Having CSS class prepared, now we can write actual plugin.

Ext.define('GeneralLearning.ux.VerticalHeader', {
    alias: 'plugin.verticalheader',
    grid: null,
    textMetric: null,
    init: function (grid) {
        var me = this;
        me.grid = grid;
        me.grid.addCls('v-vertical-header-grid');
        me.textMetric = new Ext.util.TextMetrics();
        me.grid.on({
            afterlayout: {
                scope: me,
                fn: me.handleAfterLayout
            }
        });
    },

    constructor: function (cfg) {
        Ext.apply(this, cfg);
    },

    handleAfterLayout: function (cmp) {
        var me = this,
            maxWidth = 0,
            headerItems = cmp.headerCt.items,
            curremtWidth;

        headerItems.each(function (item) {
            if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {
                maxWidth = curremtWidth + 10;
            }
        });

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

Ext.define('GeneralLearning.ux.VerticalHeader', {

alias: 'plugin.verticalheader',

grid: null,

textMetric: null,

init: function (grid) {

var me = this;

me.grid = grid;

me.grid.addCls('v-vertical-header-grid');

me.textMetric = new Ext.util.TextMetrics();

me.grid.on({

afterlayout: {

scope: me,

fn: me.handleAfterLayout

}

});

constructor: function (cfg) {

Ext.apply(this, cfg);

handleAfterLayout: function (cmp) {

var me = this,

maxWidth = 0,

headerItems = cmp.headerCt.items,

curremtWidth;

headerItems.each(function (item) {

if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {

maxWidth = curremtWidth + 10;

}

});

cmp.headerCt.el.select('.x-column-header-text').each(function (el) {

el.setSize(maxWidth, maxWidth);

});

}

});

At the very beginning .v-vertical-header-grid class is added to the grid. Thanks to this, CSS selector created in the first step is able to select text in header. At this point text is rotated, however it can’t fit into header – its size didn’t change. That is why in function handleAfterLayout I manually measure text height using Ext.util.TextMetrics and change height of header.Solution presented above works fine in IE10, Opera, Firefox and Chrome. There were some problems in IE9, however extending CSS class with these rules

.v-vertical-header-grid .x-column-header {
                background-image: -ms-linear-gradient(rgb(249, 249, 249), rgb(227, 228, 230)) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F9F9F9', endColorstr='#E3E4E6');

  }
  
  .v-vertical-header-grid .x-grid-header-ct {
                background-image: -ms-linear-gradient(rgb(249, 249, 249), rgb(227, 228, 230)) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F9F9F9', endColorstr='#E3E4E6');

  }

.v-vertical-header-grid .x-column-header {

background-image: -ms-linear-gradient(rgb(249, 249, 249), rgb(227, 228, 230)) !important;

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F9F9F9', endColorstr='#E3E4E6');

}

.v-vertical-header-grid .x-grid-header-ct {

background-image: -ms-linear-gradient(rgb(249, 249, 249), rgb(227, 228, 230)) !important;

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F9F9F9', endColorstr='#E3E4E6');

}

did the trick. Here is the result

Source code for this post can be found here
There is a problem with this plugin and locked columns, please see the updated version of this plugin here

.NET BLOG

.NET, C# blog

Extjs – vertical header in grid and locked columns

Extjs – vertical header in grid