Our blazing fast Grid component built with pure JavaScript


Post by markusmo »

Thanks for the heads up :-)

Post by markusmo »

I also found another problem in the same source:
When I drag several events into the scheduler quite fast I get:
TypeError: _rows[(fromRowIndex - 1)] is undefined scheduler.module.js:49535:29
    renderFromRow https://localhost:5000/libs/scheduler.module.js:49535
    onEventStoreChange https://localhost:5000/libs/scheduler.module.js:81085
    runWithTransition https://localhost:5000/libs/scheduler.module.js:79048
    onEventStoreChange https://localhost:5000/libs/scheduler.module.js:81083
    onEventStoreChange https://localhost:5000/libs/scheduler.module.js:82122
    trigger https://localhost:5000/libs/scheduler.module.js:5814
    endBatch https://localhost:5000/libs/scheduler.module.js:21794
    forEach self-hosted:262
    endBatch https://localhost:5000/libs/scheduler.module.js:21775
    updateRecordsSingleAssignmentMode https://localhost:5000/libs/scheduler.module.js:69910
    updateRecords https://localhost:5000/libs/scheduler.module.js:69865
    finalize https://localhost:5000/libs/scheduler.module.js:69207
    onDrop https://localhost:5000/libs/scheduler.module.js:69096
    trigger https://localhost:5000/libs/scheduler.module.js:5814
    finishTranslateDrag https://localhost:5000/libs/scheduler.module.js:36053
    onMouseUp https://localhost:5000/libs/scheduler.module.js:36837
    handler https://localhost:5000/libs/scheduler.module.js:11036

Post by mats »

Please start a new thread for each issue you want to report

Post by markusmo »

Started a new thread viewtopic.php?f=44&t=10999

Post by Animal »

I recommend you do not use all that hand-spun HTML and CSS.

Your sole outer component which you need to render to the document.body should be a Bryntum Panel.

A Panel is a container which may contain a Scheduler stacked on top of a Grid.

And it may also have a Toolbar of Buttons at its top.
new Panel({
    appendTo : document.body,
    tbar : [{    // All those tools at the top can go in here
        type : 'button',
        ...
    }, {
        type : 'slider',
        ....
    }, {
        type : 'datefield',
        ....
    }],
    layout : 'vbox', // Layout two children Vertically using flexbox direction column
    items : [
    	topScheduler,
    	{
    	    type : 'tabpanel',
    	    flex : 4,              // How must vertical space to take
    	    tbar : [{              // All those grid tools can go here
    	    	type : 'button'
    	    }],
            items : [bottomGrid1, bottomGrid2...]
        }
    ]
});
Where you may instantiate the topScheduler (configured with flex : 6 so it takes up 6 tenths of the space because the bottom Panel has flex : 4) and bottomGrid before. Give the bottomGrid, some padding-top to make that gap between upper and lower items.

Post by markusmo »

Hi
I did not consider this yet. I will try this out, I still have to do some adoptions to the application, so this refactoring will probably make generating the GUI simpler
Thanks again for the help, I am quite overwhelmed with the support I get from you guys :-)

Post Reply