Extjs – vertical header in grid and locked columns

TPodolak, , ,

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

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

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

vertical header
Source code for this post can be found here

Extjs – vertical header in grid and locked columns

3 thoughts on “Extjs – vertical header in grid and locked columns”

  1. great post! exactly what i was looking for!
    one thing doesn't work as expected: in my grid, i want only the headers of the 'normal grid' to be vertical, the locked part's header should remain horizontal. so i created one instance of the plugin, and applied it only to the 'normal grid', but unfortunately if affected the entire grid.
    any suggestion?
    cheers,
    eRez

  2. TPodolak says: 

    Change init function of plugin to

    init: function (grid) {
    var me = this;
    me.grid = grid;

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

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

    }
    else {
    if (me.vertical)
    me.grid.addCls('v-vertical-header-grid');
    me.grid.on({
    afterlayout: {
    scope: me,
    fn: me.handleAfterLayout
    }
    });
    }
    },

    and in Your grid create plugin this way

    Ext.create('GeneralLearning.ux.VerticalHeader',{
    lockedGridCfg:{
    vertical:false
    }
    })
    It seems to work in my example

  3. Ext.onReady(function(){
    var data = [
    ['myNewdata'],
    ['myNewdata'],
    ['myNewdata'],
    ];
    var store = new Ext.data.ArrayStore({
    fields: [
    { name: "state",type: "string"}
    ],
    data: data
    });
    Cm = new Ext.grid.ColumnModel({
    defaults: {
    sortable: true
    },
    columns:[
    { header: "State",dataIndex: "state" },
    ]
    });
    var grid = new Ext.grid.GridPanel({
    renderTo:Ext.getBody(),
    autoHeight: true,
    ds : store,
    cm:Cm,
    });
    });
    this is my code how can i do this here ? . i am not getting please help me. .!

Comments are closed.