HTML выше xtype: 'formpanel' в Sencha Touch 2?

Question

Я новичок в Sencha Touch 2 и хотел бы поместить HTML-тег вверху страницы и xtype: formpanel ниже этого. Есть ли подсказки, как это сделать? Должен ли я разместить оба эти элемента внутри другого xtype?

Thx заранее.

-> Screenshot

Код выглядит следующим образом (некоторые вещи пришли перед кодом, конечно):

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

Вы можете осуществить это с помощью 2 xtypes.

(1) xtype = панель или контейнер для отображения html или top. (2) xtype = набор полей для среднего содержимого.

Как только это приложение sencha появится в браузере, оно будет преобразовано в серию divs и spanans. Таким образом, 1 # даст вам больше возможностей для управления текстом.

Я выполнил то же самое для вас на senchafiddle, вы можете посмотреть,

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

Надеется, что это помогает.

Answer 2

Да, спасибо, я получил это тем, как это:

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