出现在我的煎茶触摸列表视图中的细胞如下;
但是,我想如以下图像中的文本上侧显示。 我怎样才能做到这一点。 我的代码如下所示:
<div><img src="{IMAGE_URL}" height="55" width="55"/></div>
{MAIN} <br/>
{SUBMAIN}
我需要在我的列表视图电池以下几点:
1)我想添加一个背景颜色为白色。
2)我想添加一个按钮,在那里我可以点击并显示警告。
出现在我的煎茶触摸列表视图中的细胞如下;
但是,我想如以下图像中的文本上侧显示。 我怎样才能做到这一点。 我的代码如下所示:
<div><img src="{IMAGE_URL}" height="55" width="55"/></div>
{MAIN} <br/>
{SUBMAIN}
我需要在我的列表视图电池以下几点:
1)我想添加一个背景颜色为白色。
2)我想添加一个按钮,在那里我可以点击并显示警告。
试试我的代码,你可以用它来构建上
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;
}
在你的CSS文件中,设置图像为内联。 而且,做同样的文本之后。
img {
display:inline;
}
我想这应该解决显示图像旁边的文本的问题。 然后,你可以给图像边缘,从而改善外观。
您可以使用
<input type="button" name="button" value="Press this for alert">
创建一个按钮。