Multiline Tree nodes in ExtJS

While I really like Ext and the component model behind it, some simple things seems to be missing - an example would be multiline nodes in TreePanel. After some searching I managed to find a  MultilineTreeNodeUI plugin.

Here's how to use it:

new Ext.tree.TreePanel({
 //renderTo:'treecontainer',
 id: 'upcoming_events',

 loader: new Ext.tree.TreeLoader({
  dataUrl:'/datasource/upcoming_events_json',
  baseParams: {},
  baseAttrs: {uiProvider: Ext.ux.tree.MultilineTreeNodeUI}
 }),
 root: new Ext.tree.AsyncTreeNode({
  expanded: true
 }),
 rootVisible: false,
 collapsed: false
})

Just include the MultilineTreeNodeUI.js in the page and create a usual TreePanel. The only difference is to include baseAttrs: {uiProvider: Ext.ux.tree.MultilineTreeNodeUI} in your loader. Multilne tree requires the data in the following format:

{
 text: '09 April 2009',
 iconCls: 'calendar',
 details: ['Program for the day...'],
 uiProvider: Ext.ux.tree.MultilineTreeNodeUI,
 children:[
  {
   text: '9:30',
   iconCls: 'time',
   details: ['Win $1M', 'Sure win...'],
   uiProvider: Ext.ux.tree.MultilineTreeNodeUI,
   leaf: true
  },
  {
   text: '11:30',
   iconCls: 'time',
   details: ['Buy private jet', 'Or something'],
   uiProvider: Ext.ux.tree.MultilineTreeNodeUI,
   leaf: true
  }
 ]
}

Where the additional lines are provided by details attribute. It's an array - one item per line - maybe not an ideal solution but still workable - worst case you just split the longer line by number of characters. The uiProvider will generate the multiple lines. Your controller doesn't have to do anything about it as it will be added automatically by the baseAttrs: {uiProvider: Ext.ux.tree.MultilineTreeNodeUI} we added in the loader.

And here's the outcome: