Search code examples
htmlsencha-touch-2xtype

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


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
                                    }
                                ]
                            }
                        ]
                    },

Solution

  • 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.