Kanban Task Board 2.0 With Ext JS 5 support.
Today we’re thrilled to announce the latest releases of our Kanban Task Board: v1.0 based on Ext JS 4 and v2.0 based on Ext JS 5. We will continue to support the 1.0-branch with bug fixes, but new development and features will go into the 2.0 branch. Apart from the new platform support, one of the really cool things about the 2.0 release is the new “Kanban-Scheduler” demo included. It contains two interesting features that we’ll go through next. If you’re low on time, I made a little intro video showing these features.
Task board meets Ext Scheduler
The first cool thing about this sample: The two components share the same data model structure and can therefore easily visualize the same data set. This means configuring both components with the same Ext JS data store as seen below:
[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
{
xtype : ‘schedule’,
flex : 3,
startDate : new Date(2014, 9, 13),
eventStore : taskStore,
resourceStore : resourceStore
},
{
xtype : ‘kanban’,
flex : 5,
taskStore : taskStore,
resourceStore : resourceStore
}
[/crayon]
The nice thing here is that any change made in one of the components will be immediately reflected in the other since all the wiring is already done. Both components simply observe the data stores for any changes.
Rapid Prototyping With Live Template Changes
If you click the Settings icon on the left, you see the second cool thing about this sample. Two panels allow you to dynamically change the HTML template and any styles you want, right in the browser. That’s right. You type, and the view is immediately updated with your changes. This is done using a trick which generates a new Ext.XTemplate for the Task Board view.
Modifying CSS And Styles
In the same way, you can create your own custom style rules and the browser shows your changes live. This is great when you want to play around with the visual appearance without slow page reloads.
Summing up…
The Task Board is a very flexible component, allowing you to define any number of task states and any visual HTML template to render the tasks. As seen in the example above, you can also share data stores with any number of other components to visualize the data in different ways. We hope it gives you good inspiration of what can be accomplished using our products. Please share any feedback you have in the comments section below. Happy Hacking!