Dynami Event Height

[Maxim Gorkovsky]

We haven't decided yet do we need this feature or not.

Also your ticket seem to have wrong description. In ticket you are requesting dynamic column width and here you suggest events to have dynamic height in rows with static height.

[Misiu]

I have 2 tickets, in one of them I'm asking for columns but in second I'm asking for event height (ticket 1093).
I linked this ticket in this thread earlier, but I can repost it, no problem

https://www.assembla.com/spaces/bryntum ... ity/ticket

[Misiu]

Hope this one will be added to Scheduler
As I wrote before right now if we add more than one event is same time span whole row is changing height.
It should be able to "freeze" row height and have events with dynamic height.
There is an option called "dynamicRowHeight" but setting it cause all events to be one on top of other.

[shinkoi]

I want this feature, too. Currenty I am developing sub events inside of events ( just like dragselector-plugin example )but I had to set the specific height at the eventRender for example ( 10px * subEvents.getCount() ). But if I made those sub-event expandable so that when text get longer the sub event can glow higher, then calculation of event height is not that simple.

[Leather]

I'd like this feature too - our specific scenario is we have rows with lots of data/text in the fixed column spanning many lines - what we need to be able to do is make the row large enough to show this even if there are no events against that row, but if there are the events need to be smaller than the row height - for example: rowHeight: 50, eventHeight: 25 so by default we can show two events stacked but if more are added the row grows, if 1 or no events are present the row still stays at 50 rather than 25).

[Leather]

I've created a sub class which accepts a minimum row height but in my opinion the row height and event height should be broken apart in the scheduler.

Anyhow here's my code if it helps anyone else - the override proved to be more complex to apply because of the way the classes are defined (inheritables) so there may be a better way to do this (but I'm up against a deadline and this appears to work so I'll go with it for now - if anyone can suggest an improvement I'm all ears):

Ext.define('GenStack.scheduling.SchedulerGridWithMinRowHeight', {
   extend: "Sch.panel.TimelineGridPanel",
   mixins: [
       'Sch.mixin.SchedulerPanel'
   ],
   alias: ['widget.schedulergrid', 'widget.schedulerpanel'],
   alternateClassName: 'Sch.SchedulerPanel',
   viewType: 'schedulergridview',

   initComponent: function () {
      this.callParent(arguments);
      this.getSchedulingView()._initializeSchedulerView();
   }

}, function () {
   this.override(
      Ext.apply(Sch.mixin.SchedulerPanel.prototype.inheritables() || {}, {
         enableRowHeightInjection: function (lockedView, schedulingView) {
            var me = this;

            var cellTpl = new Ext.XTemplate(
               '{%',
               'this.processCellValues(values);',
               'this.nextTpl.applyOut(values, out, parent);',
               '%}',
               {
                  priority: 1,
                  processCellValues: function (cellValues) {
                     if (schedulingView.mode === 'horizontal') {
                        var nbrBands = 1;

                        if (schedulingView.dynamicRowHeight) {
                           var resource = cellValues.record;
                           var layout = schedulingView.eventLayout.horizontal;

                           nbrBands = layout.getNumberOfBands(resource, function () {
                              return schedulingView.eventStore.filterEventsForResource(resource, schedulingView.timeAxis.isRangeInAxis, schedulingView.timeAxis);
                           });
                        }

                        var rowHeight = (nbrBands * me.getRowHeight()) - ((nbrBands - 1) * schedulingView.barMargin) - schedulingView.cellTopBorderWidth - schedulingView.cellBottomBorderWidth;

                        // NOTE ******* - This is the change - check for a minimum row height.
                        if (me.minRowHeight && rowHeight < me.minRowHeight) {
                           rowHeight = me.minRowHeight;
                        }

                        cellValues.style = (cellValues.style || '') + ';height:' + rowHeight + 'px;';
                     }
                  }
               }
            );

            lockedView.addCellTpl(cellTpl);

            // this is a workaround, to force ExtJS grid to use "long" rendering path when doing cell updates
            // which involves the cell templates (which we had overrode)
            // w/o it, grid may use "fast" path and only update the cell content, leaving the row height unsynchronized
            Ext.Array.forEach(lockedView.getColumnManager().getColumns(), function (column) {
               column.hasCustomRenderer = true;
            });

            // on the `refresh` event from the store, we want the normal view to be refreshed first,
            // because refreshing it will also cache the events layout data. After that, the locked view will just reuse the
            // cached data, otherwise the layout data would be calculated twice
            lockedView.store.un('refresh', lockedView.onDataRefresh, lockedView);
            lockedView.mon(lockedView.store, 'refresh', lockedView.onDataRefresh, lockedView);

         }
      })
   );
});

Use it like this:

Ext.define('PM.programmeManager.ProgrammeManagerJobGantt', {
   extend: 'Sch.panel.SchedulerGridWithMinRowHeight',
   xtype: 'ProgrammeManagerJobGantt',
   pageSize: 10,
   rowHeight: 20,
   minRowHeight: 50, <--- Note this.
   ...
});

This allows you to create rows larger than 1 event in height - in this example slightly over two event depths in height. If more that 2 events get stacked the row will grow beyond this height but it will not shrink below this.

Here's what it looks like with a min row height specified: