自定义列表视图单元格的 HTML答案

【问题标题】：Customizing HTML for the List view cell自定义列表视图单元格的 HTML
【发布时间】：2013-07-11 16:36:30
【问题描述】：

我的 Sencha 触摸列表视图的一个单元格如下所示；

但是，我希望文本显示在侧面，如下图所示。我怎样才能做到这一点。我的代码如下所示：

<div><img src="{IMAGE_URL}" height="55" width="55"/></div>
{MAIN} <br/>
{SUBMAIN}

我的列表视图单元格中需要以下内容：

1.) 我想添加背景颜色白色。

2.) 我想添加一个按钮，我可以在其中单击并显示警报。

【问题讨论】：

标签： html sencha-touch sencha-touch-2 sencha-architect

【解决方案1】：

试试我的代码，你可以用它来构建

    var list = { xtype: 'list',
        id: 'list_product',
        emptyText: '<div class="list-empty-text">No hay coincidencias</div>',
        data: [
            {IMAGE_URL: "t1", MAIN: "Test1", SUBMAIN : "test sub1", COST : "30" }, 
            {IMAGE_URL: "t2", MAIN: "Test2", SUBMAIN : "test sub2", COST : "40" }],
        itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<div class = "details">',
            '<div class="maindetails">',
               '<img src="{IMAGE_URL}" align="top" class="textmiddle"/>',   
                '<div class="maincontent">',
                    '<p>{MAIN}</p>',
                    '<p>{SUBMAIN} <span class="x-button btn">${COST}</span></p>',
                '</div>',
            '</div>',
        '</div>',           
        '</tpl>'
        ),
        listeners: [
            {
            element: 'element',
            delegate: 'span.x-button.btn',
            event: 'tap',
            fn: function() {
                alert('handle button');
            }
        } 
        ]
    };

css

请注意以下 css 可以工作.. 但你可以写得比这更好以获得相同的输出，我仍在学习 css

.details img {
    width: 50px;
    height: 50px;
}

.maindetails .maincontent{
    margin-top : -50px;
    margin-left : 70px;
}

.btn {
    width : 45px;
    float : right;
}

【讨论】：

【解决方案2】：

在您的 css 文件中，将图像设置为内联。并且，之后对文本执行相同操作。

img {
  display:inline;
}

我认为这应该可以解决在图像旁边显示文本的问题。然后你可以给图像留出边距，以改善外观。

你可以使用

<input type="button" name="button" value="Press this for alert">

用于创建按钮。

【讨论】：

所以当用户点击按钮时，我也想显示一个警报（现在）。稍后我将使用它通过推文分享。那么当用户点击按钮时我怎么能调用另一个函数呢？
您必须为此使用 javascript/jquery。对于警报。或者，是的，您可以在 jQuery 中调用您使用 jQuery 中的“onClick”处理程序构建的另一个函数。