Our flexible Kanban board for managing tasks with drag drop


Post by licjapodaca »

Hi there, when I render the Gantt component in a DIV marked with red color like so:

Screen Shot 2021-06-17 at 12.19.02 p.m..png
Screen Shot 2021-06-17 at 12.19.02 p.m..png (154.44 KiB) Viewed 563 times

The DIV tag has the correct height but the Gantt component that renders on it don't.

But if I manually affect the height of the Gantt, it renders correctly with the column scrollbar like so:

Screen Shot 2021-06-17 at 12.19.30 p.m..png
Screen Shot 2021-06-17 at 12.19.30 p.m..png (129.95 KiB) Viewed 563 times

Is there a way to specify to the Gantt that calculate the height when the DIV container resize?


Post by licjapodaca »

I already found a solution, I just detects the resize event of the DIV tag in ExtJS like so:

		{
			xtype: 'component',
			reference: 'myTaskboardRef',
			autoEl: {
				tag: 'div'
			},
			listeners: {
				resize: 'onResizeComponent'
			}
		}

and then in the ViewController I change the height of the Taskboard component like so:

Ext.define('Bryntum.taskboard.TaskboardPanelController', {
	extend: 'Ext.app.ViewController',

alias: 'controller.taskboardpanel',

onResizeComponent: function(cmp, width, height) {
	try {
		const me = this;
		console.log('Height:', height);
		if (me.getView()._taskboard) {
			me.getView()._taskboard.height = height;
		}
	} catch (e) {
		Ext.raise({ msg: e.message, errorType: e.name, stack: e.stack });
	}
},
...
...

Sorry for the inconvenience ...

Regards


Post Reply