自定义列表视图单元格的HTML [英] Customizing HTML for the List view cell

问题描述

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

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

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

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

1。）我想添加背景颜色白色。

2。）我想添加一个按钮，我在哪里可以点击并显示提醒。

解决方案

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

  var list = {xtype：'list'，
 id：'list_product'，
 emptyText：'< div class =list-empty-text > No hay coincidencias< / div>'，
数据：[
 {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 cl ass =maindetails>'，
'< img src ={IMAGE_URL}align =topclass =textmiddle/>'，
'< div class = maincontent>'，
'< p> {MAIN}< / p>'，
'< p> {SUBMAIN}< span class =x-button btn> $ {COST}< / span>< / p>'，
'< / div>'，
'< / div>'，
'< / div> '，
'< / tpl>'
），
听众：[
 {
元素：'元素'，
代理：'span。 x-button.btn'，
事件：'tap'，
 fn：function（）{
 alert（'handle button'）; 
} 
} 
] 
}; 
  

css

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

  .details img {
宽度：50px; 
身高：50px; 
} 
 
 .maindetails .maincontent {
 margin-top：-50px; 
 margin-left：70px; 
} 
 
 .btn {
宽度：45px; 
 float：right; 
} 
  

A cell of my Sencha touch list view appears as follows;

But, i want the text to display on the side as shown in the following image. How can i do this. My code looks like this :

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

I need the following in my list view cell:

1.) I want to add a background colour White.

2.) I want to add a button, where i could click and display an alert.

解决方案

Try my code and you can use this to build on

    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

please note that following css works.. but you can write better than this to get same output and i am still learning css

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

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

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

这篇关于自定义列表视图单元格的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！