HTML above an xtype: 'formpanel' in Sencha Touch 2?

Question

I'm new to Sencha Touch 2 and would like to place an HTML tag on top of the page and an xtype: formpanel below that. Any clue how to do this? Do I have to place both of these elements inside another xtype?

Thx in advance.

-> Screenshot

The code looks as follows (some stuff came before the code of course):

xtype: 'carousel',
                direction: 'horizontal',
                //Will be applied to every object in the array by default
                defaults: {
                    styleHtmlContent: 'true',
                    scrollable: true
                },
                items: [
                    {
                        cls: 'configurator-item',
                        html: '<h2>Demo heading</h2>',

                        xtype: 'formpanel',
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'Demo',
                                defaults: {
                                    //labelWidth: '30%',
                                    autoCapitalize: true,
                                    //required: true,
                                    clearIcon: true
                                    },
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'locationOfHouse',
                                        label: 'Demo',
                                        placeHolder: 'Demo?'
                                    },
                                    {
                                        xtype: 'spinnerfield',
                                        name: 'numberOfPeople',
                                        label: 'Demo',
                                                                                    minValue: 0,
                                        maxValue: 99,
                                        increment: 1,
                                        cycle: true
                                    }
                                ]
                            }
                        ]
                    },

Answer 1

You can implement this using 2 xtypes.

(1) xtype = panel or container to display the html or top. (2) xtype = fieldset for the middle content.

Once this sencha app renders in the browser, it will be converted into series of divs and spans. So, 1# will give you more control to manipulate the text.

I have implemented the same for you on senchafiddle, you can have a look,

http://www.senchafiddle.com/#PHRyc

Hope it helps.

Answer 2

Yes, thanks I got it meanwhile like this:

        items: [
        {
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    docked: 'top',
                    html: [
                        '<h1>Demo heading</h1>'
                },
                {
                    xtype: 'fieldset',
                    title: 'Demo',
                    defaults: {
                        //labelWidth: '30%',
                        autoCapitalize: true,
                        //required: true,
                        clearIcon: true,
                        labelAlign: 'top',
                        },
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'Demo',
                            label: 'Demo',
                            labelWidth: '33%',
                            placeHolder: 'Demo'
                        }
  (..and closing all the brackets above..)