在sencha touch中放置html模板頂部視圖

Question

我有一個html模板元素。即使我已經配置第一個，它仍然在視圖底部加載。我想把它放在視圖的頂部。任何想法？ tpl是模板元素

我的代碼

config: { 
    title: 'Info ', 
    styleHtmlContent: true, 
    scrollable: true, 

    tpl: ['<table><tr><td><img src="{image}" height="60" width="60" id="{id}" /></td></tr>', 
     '<tr><td>{model}</td></tr>', 
     '<tr><td>{price}</td></tr>', 
     '<tpl for="color">', 
     '<tpl for="infos">', 
     '<tr><td>{name}: <tpl for="item_names"> ], 
    store: 'Item', 

    items:[ 

     { 
      xtype: 'fieldset', 

      items : [ 

       { 
        xtype : 'selectfield', 
        name : 'quantity', 
        label:'Quantity', 
        id: 'quantity' 
       },{ 
       other elements 
        } 


       ] 

      } 
    ] 

Answer 1

試試這個，

config: { 

scrollable:true, 
styleHtmlContent:true, 

items:[ 
{ 
xtype: 'panel', 
title: 'Info ', 
style: 'margin-top: 0%;', 
height: '20%', // whatever height you want for templete 
width: '20%', // whatever width you want for templete 
styleHtmlCls:'details', 
tpl:['<table><tr><td><img src="{image}" height="60" width="60" id=" {id}" /></td></tr>', 
    '<tr><td>{model}</td></tr>', 
    '<tr><td>{price}</td></tr>', 
    '<tpl for="color">', 
    '<tpl for="infos">', 
    '<tr><td>{name}: <tpl for="item_names">'], 
store: 'Item', 
},  
{ 
xtype: 'fieldset',      
items : [        
{ 
    xtype : 'selectfield', 
    name : 'quantity', 
    label:'Quantity', 
    id: 'quantity' 
},{ 
    other elements 
    } 
] 

} 
    ] 
}, 

希望這可以幫助你。

Answer 2

試圖爲表CSS設置：

table { display: block; top: 0px;} 

Answer 3

你可以通過創建另一個組件並在你的組件中包裝你的tpl來完成。然後，您可以將該組件包含爲您的視圖項：

items:[ 
    { 
     xtype: 'panel', 
     tpl: [ 
      '<table><tr><td><img src="{image}" height="60" width="60" id="{id}"/</td></tr>', 
      '<tr><td>{model}</td></tr>', 
      '<tr><td>{price}</td></tr>', 
      '<tpl for="color">', 
      '<tpl for="infos">', 
      '<tr><td>{name}: <tpl for="item_names">' 
     ], 

     store: 'Item' 

    }, 

    { 
     xtype: 'fieldset', 

     items : [ 

      { 
       xtype : 'selectfield', 
       name : 'quantity', 
       label:'Quantity', 
       id: 'quantity' 
      },{ 
       other elements     
      } 
     ] 

    } 
]