html - 编写自定义视图 - Sencha touch

Question

我需要在以下屏幕中建模Sencha Touch Architect；

左上角的图像。在右上角有一个文本 ( Custom Tailored Clothing) 和它下方的按钮。我该如何为此编写 HTML？

到目前为止我的工作；

<img src="{url}" height="50" width="50"/>
<b>Custom Tailored Clothing</b>

但是，文本Custom Tailored Clothing出现在图像下方，而不是我想要的侧面。我的按钮也有同样的问题。有人可以帮助我处理 HTML。

更新

参数不清楚：dataview, index, target, record, e, eOpts

onNewsItemTap: function(dataview, index, target, record, e, eOpts) {

    if (senchaEvent.event.target.nodeName === 'BUTTON') {

        var form = Ext.create("MyApp.view.DV",{
            title:record.data.Name_mine,
            record:record
        });
        this.getMainView().push(form);
    } else {
        console.log("dfdfd");
    }
},...

Answer 1

像这样

HTML

<div class="content">
<img src="{url}" height="50" width="50"/>
<div class="title"> <p><b> Custom Tailored Clothing </b></p>
<button>300 mercer st</button></div>
</div>
<p>Why you might like this deal</p>

CSS

div.content {
    height : 50px;
    margin-bottom : 5px;
}
div.content img {
    float : left;
    margin-right: 20px;
}

输出

根据评论

在列表中添加监听器

listeners : {
        itemtap: function (list, index, item, record, senchaEvent) {
            if (senchaEvent.event.target.nodeName === 'BUTTON') {
                // code for getting a message box popped out
            }
            else
              // code for slides to a new view 
        }
}

更新

onNewsItemTap: function(dataview, index, target, record, e, eOpts) {

    if (e.event.target.nodeName === 'BUTTON') {

        var form = Ext.create("MyApp.view.DV",{
            title:record.data.Name_mine,
            record:record
        });
        this.getMainView().push(form);
    } else {
        console.log("new view");
    }
}