templates - 将 html 模板放在 sencha touch 视图的顶部

Question

我有一个 html 模板元素。即使我第一次配置它，它也会在视图底部加载。我想把它放在 view 的顶部。任何的想法？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

尝试为表 css 设置：

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

Answer 2

试试这个，

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

    }
]