Monday, April 6, 2009

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({
 id: 'upcoming_events',

 loader: new Ext.tree.TreeLoader({
  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,
   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:

1 comment:

  1. Casinos Near Casino, Atlanta - Mapyro
    Best 문경 출장마사지 Casinos Near Casino, Atlanta · Fairfield Hotel Casino and Spa · Hollywood Casino at 전라북도 출장샵 Charles Town 경산 출장샵 Races & Suites by Wyndham Councilman · South Point Casino & 동해 출장마사지 Spa by Wyndham 영주 출장마사지