ExtJS 2 with Accordion Menu

I've been playing around with ExtJS for the last several weeks for a project at my work and just recently went through the process of upgrading out pages from ExtJS 1.x to 2. It was quite the experience and one of things that I found to be much easier was getting the Accordion menu working.

When we used 1.x we used the ux.Accordion menu system. But for 2 I decided to try out the built in Accordion menu.

Here's a taste of some of the code.

Before:

var acc = new Ext.ux.Accordion('acc-ct', {
fitHeight: false,
useShadow: true
})

// create accordian panels from existing DIVs
var panel1 = acc.add(new Ext.ux.InfoPanel('panel-1', {trigger:'title', draggable: true, resizable: true, collapsed:false}));
var panel2 = acc.add(new Ext.ux.InfoPanel('panel-2', {trigger:'title', draggable: true, resizable: true}));
var panel3 = acc.add(new Ext.ux.InfoPanel('panel-3', {trigger:'title', draggable: true, resizable: true}));
var panel4 = acc.add(new Ext.ux.InfoPanel('panel-4', {trigger:'title', draggable: true, resizable: true}));
var panel5 = acc.add(new Ext.ux.InfoPanel('panel-5', {trigger:'title', draggable: true, resizable: true}));

After:

var accordian = new Ext.Panel({
layout: 'accordion',
layoutConfig: {
titleCollapse: false,
animate: true,
fill: false
},
width: 200,
collapsible: true,
items: [
{
title: 'Panel 1',
html: 'Content'
},
{
title: 'Panel 2',
html: 'Content'
},
{
title: 'Panel 3',
html: 'Content'
},
{
title: 'Panel 4',
html: 'Content'
},
{
title: 'Panel 5',
html: 'Content'
}
],
renderTo: 'acc-ct'
});

As you can see, there are slight variations, but I prefer the new approach, even if it is much longer. It works well with ExtJS and their Panel layout which is nice. The only thing I don't like is that I don't know how to get the HTML content from an existing element on the page (like how ux.Accordion will convert DIV tags).