2013-05-17 37 views
2

我是Sencha Touch 2的新手,希望在頁面頂部放置一個HTML標籤,並在其下面放置一個xtype:formpanel。任何線索如何做到這一點?我必須將這兩個元素放在另一個xtype中嗎?HTML上面的xtype:'formpanel'在Sencha Touch 2中?

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

回答

0

您可以實現這一點使用2個xtypes。

(1)xtype =要顯示html或top的面板或容器。 (2)xtype =中間內容的字段集。

一旦這個sencha應用程序在瀏覽器中呈現,它將被轉換爲一系列的div和跨度。所以,1#會給你更多的控制來操縱文本。

我已經實現了你同樣的senchafiddle,你可以去看看,

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

希望它能幫助。

0

是的,謝謝,我得到了它同時是這樣的:

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