自定义列表视图单元格的HTML
“我的Sencha触摸列表”视图的一个单元格如下所示 但是,我希望文本显示在侧面,如下图所示。我怎样才能做到这一点。我的代码如下所示:自定义列表视图单元格的HTML,html,sencha-touch,sencha-touch-2,sencha-architect,Html,Sencha Touch,Sencha Touch 2,Sencha Architect,“我的Sencha触摸列表”视图的一个单元格如下所示 但是,我希望文本显示在侧面,如下图所示。我怎样才能做到这一点。我的代码如下所示: <div><img src="{IMAGE_URL}" height="55" width="55"/></div> {MAIN} <br/> {SUBMAIN} {MAIN} {submin} 我的列表视图单元格中需要以下内容: 1.)我想添加一个白色背景色 2.)我想添加一个按钮,在那里我可以单击并显示
<div><img src="{IMAGE_URL}" height="55" width="55"/></div>
{MAIN} <br/>
{SUBMAIN}
{MAIN}
{submin}
我的列表视图单元格中需要以下内容:
1.)我想添加一个白色背景色
2.)我想添加一个按钮,在那里我可以单击并显示警报
在css文件中,将图像设置为内联。 然后,对课文做同样的处理
img {
display:inline;
}
我认为这应该可以解决在图像旁边显示文本的问题。然后,你可以给图像的边缘,以改善外观
你可以用
<input type="button" name="button" value="Press this for alert">
用于创建按钮。尝试我的代码,您可以使用它来构建
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');
}
}
]
};
因此,当用户单击按钮时,我还想显示一个警报(目前)。稍后我会用它通过推特分享。那么,当用户单击按钮时,我如何调用另一个函数呢?为此,您必须使用javascript/jquery。发出警报。或者,是的,您可以在jquery中调用使用jquery中的“onClick”处理程序构建的另一个函数。
.details img {
width: 50px;
height: 50px;
}
.maindetails .maincontent{
margin-top : -50px;
margin-left : 70px;
}
.btn {
width : 45px;
float : right;
}