{"id":29,"date":"2013-11-10T21:09:00","date_gmt":"2013-11-10T21:09:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2013\/11\/10\/extjs-vertical-header-in-grid-and-locked-columns\/"},"modified":"2016-01-30T23:43:39","modified_gmt":"2016-01-30T23:43:39","slug":"extjs-vertical-header-in-grid-and-locked-columns","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2013\/11\/10\/extjs-vertical-header-in-grid-and-locked-columns\/","title":{"rendered":"Extjs &#8211; vertical header in grid and locked columns"},"content":{"rendered":"<p>A while ago I wrote an <a>article<\/a> where I described how to create a plugin, which can flip header of <i>Ext.panel.Grid<\/i> vertically. I&#8217;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 <a href=\"http:\/\/dev.sencha.com\/deploy\/ext-4.0.0\/examples\/grid\/locking-grid.html\"> locked columns<\/a>. After digging into <i>Extjs<\/i> source code I found out that when You use locked columns, the grid is created as a combination of two grids: <i>normalGrid<\/i> and <i>lockedGrid<\/i>. 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 <i>init<\/i> function which now looks that way<\/p>\n<pre lang=\"javascript\">\r\ninit: function (grid) {\r\n      var me = this;\r\n      me.grid = grid;\r\n      me.grid.addCls('v-vertical-header-grid');\r\n      me.textMetric = new Ext.util.TextMetrics();\r\n\r\n      if (me.isLocked()){\r\n          var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),\r\n              lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);\r\n              normalGridPlugin.init(me.grid.normalGrid);\r\n              lockedGridPlugin.init(me.grid.lockedGrid);\r\n              me.grid.normalGrid.plugins.push(normalGridPlugin);\r\n              me.grid.lockedGrid.plugins.push(lockedGridPlugin);\r\n      } else {\r\n          me.grid.on({\r\n              afterlayout: {\r\n                  scope: me,\r\n                  fn: me.handleAfterLayout\r\n              }\r\n          });\r\n      }\r\n}\r\n<\/pre>\n<p>In the first step I check if columns are locked. The method for do that is pretty straightforward<\/p>\n<pre lang=\"javascript\">\r\nisLocked: function () {\r\n          var me = this;\r\n          return me.grid.normalGrid && me.grid.lockedGrid;\r\n}\r\n<\/pre>\n<p>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<\/p>\n<pre lang=\"javascript\">\r\nExt.define('GeneralLearning.ux.VerticalHeader', {\r\n    alias: 'plugin.verticalheader',\r\n    grid: null,\r\n    extraCfg:null,\r\n    textMetric: null,\r\n    init: function (grid) {\r\n        var me = this;\r\n        me.grid = grid;\r\n        me.grid.addCls('v-vertical-header-grid');\r\n        me.textMetric = new Ext.util.TextMetrics();\r\n\r\n        if (me.isLocked()) {\r\n            var normalGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg),\r\n                lockedGridPlugin = Ext.create('GeneralLearning.ux.VerticalHeader',me.extraCfg);\r\n                normalGridPlugin.init(me.grid.normalGrid);\r\n                lockedGridPlugin.init(me.grid.lockedGrid);\r\n                me.grid.normalGrid.plugins.push(normalGridPlugin);\r\n                me.grid.lockedGrid.plugins.push(lockedGridPlugin);\r\n\r\n        } else {\r\n            me.grid.on({\r\n                afterlayout: {\r\n                    scope: me,\r\n                    fn: me.handleAfterLayout\r\n                }\r\n            });\r\n        }\r\n    },\r\n\r\n    constructor: function (cfg) {\r\n        var me = this;\r\n        me.extraCfg = cfg;\r\n        Ext.apply(this, cfg);\r\n        me.callParent(arguments);\r\n    },\r\n\r\n    handleAfterLayout: function (cmp) {\r\n        var me = this,\r\n            maxWidth = 0,\r\n            headerItems = cmp.headerCt.items,\r\n            curremtWidth;\r\n\r\n        headerItems.each(function (item) {\r\n            if ((curremtWidth = me.textMetric.getWidth(item.text)) > maxWidth) {\r\n                maxWidth = curremtWidth + 10;\r\n            }\r\n        });\r\n\r\n        cmp.headerCt.el.select('.x-column-header-text').each(function (el) {\r\n            el.setSize(maxWidth, maxWidth);\r\n        });\r\n    },\r\n\r\n    isLocked: function () {\r\n        var me = this;\r\n        return me.grid.normalGrid && me.grid.lockedGrid;\r\n    }\r\n\r\n});\r\n<\/pre>\n<p><a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/11\/extjs-vertical-header-in-grid-and-locked-columns\/lockedColumns.png\" rel=\"attachment wp-att-340\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/11\/extjs-vertical-header-in-grid-and-locked-columns\/lockedColumns.png\" alt=\"vertical header\" width=\"450\" class=\"aligncenter size-medium wp-image-340\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/11\/extjs-vertical-header-in-grid-and-locked-columns\/lockedColumns.png 495w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/11\/extjs-vertical-header-in-grid-and-locked-columns\/lockedColumns-150x72.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/11\/extjs-vertical-header-in-grid-and-locked-columns\/lockedColumns-300x145.png 300w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><\/a><br \/>\nSource code for this post can be found <a href=\"https:\/\/github.com\/tpodolak\/Blog\/tree\/master\/ExtjsVerticalGridHeaderLockedColumns\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,60,61,62],"tags":[203,204,205,206],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-ext-panel-grid","category-extjs-4-2","category-plugin","category-vertical-header","tag-ext-panel-grid","tag-extjs-4-2","tag-plugin","tag-vertical-header"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions\/537"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}