Ox.load('UI', function() { Ox.Theme('modern'); var $treeList = new Ox.TreeList({ items: [ {id: 'D', title: 'D', items: [ {id: 'debord', title: 'Guy Debord', items: [ {id: 'in_girum', title: 'In girum imus nocte et consumimur igni'} ]} ]}, {id: 'G', title: 'G', expanded: true, items: [ {id: 'godard', title: 'Jean-Luc Godard', expanded: true, items: [ {id: 'allemagne_90', title: 'Allemagne 90 neuf zero'}, {id: 'film_socialisme', title: 'Film socialisme'} ]}, {id: 'grandrieux', title: 'Philippe Grandrieux', items: [ {id: 'sombre', title: 'Sombre'} ]} ]}, {id: 'H', title: 'H', items: [ {id: 'haynes', title: 'Todd Haynes', items: [ {id: 'far_from_heaven', title: 'Far From Heaven'}, {id: 'i_m_not_there', title: 'I\'m Not There'} ]} ]}, {id: 'L', title: 'L', items: [ {id: 'lynch', title: 'David Lynch', items: [ {id: 'inland_empire', title: 'Inland Empire'} ]} ]}, {id: 'S', title: 'S', items: [ {id: 'scorsese', title: 'Martin Scorsese', items: [ {id: 'casino', title: 'Casino'} ]} ]} ] }), $debug = new Ox.Element('div'), $button = new Ox.Button({ title: 'Debug' }) .bindEvent({ click: function() { $text.html(JSON.stringify($treeList.$element.options('items'))); } }) .appendTo($debug), $text = new Ox.Element('div').appendTo($debug), $splitPanel = new Ox.SplitPanel({ elements: [ { element: $treeList, size: 256 }, { element: $debug } ], orientation: 'horizontal' }).appendTo($('body')); });