Ext Gantt is a very interactive Gantt chart built on the fantastic
Ext JS framework and
Vaadin is java based framework for rich and interactive UI development.
Ext framework is build on top of java-scrip. So for Vaadin and Ext framework integration you will need to create Vaadin java-script component.
First a server-side component is required which extend AbstractJavaScriptComponent.
The class should also have a @JavaScript annotation that defines the
required Ext libraries (For more details check
Integrating Java Script Component )
@JavaScript({"vaadin://js/ext-all.js", "vaadin://js/gnt-all.js", "vaadin://js/gantt.js"})
@StyleSheet({ "vaadin://themes/justransform/ext-all.css", "vaadin://themes/justransform/sch-gantt-all.css"})
public class GanttChartComponent extends AbstractJavaScriptComponent {
//Required API's
}
In above source code ext-all.js is minified version of ext framework, gnt-all.js is the bryntum gantt chart library, ganttt.js is the connector script which creates gantt chaart.
Second step is to have shared state class that extend JavaScriptComponentStat. This shared state class can be used to communicate data or any changes to client side javascript.
public class GanttChartState extends JavaScriptComponentState {
public String divId;
//Other required data which should be part of state
}
In above code please note the important element divId which will be used by javascript.In next step we will get in to more details.
Last step is client-side JavaScript connector (gantt.js). The connector javascript should define a global initializer function named based on the
fully qualified name of the server-side Component class . In this example the server-side Component is
com.ext.GanttChartComponent so the function name should be
com_ext_GanttChartComponent
com_ext_GanttChartComponent = function() {
Ext.require('Gnt.panel.Gantt');
//Get domId from state
var domId = this.getState().divId;
// Create and div using domId
var ganttElement = document.createElement('div');
ganttElement.setAttribute('id', domId);
e.appendChild(ganttElement);
//Create bryntum charts
var ganttPanel = Ext .create( 'Gnt.panel.Gantt', {
height : 400,
width : 1000,
viewPreset : 'weekAndDayLetter',
startDate : startDt,
endDate : endDate...}
//Listen for state changes
this.onStateChange = function() {
..}
//Render chart
ganttPanel.render(domId);
Important point to note here is the
divId which was passed using shared state is used to create an div element and gantt charts are render inside this div. This will attach the gantt chart element to Vaadin component and get renders on the UI.
Also onStateChange function can be used to handle data changes and update the task and dependency store as required.