我正在将数据从mysql服务器动态加载到一个列表中,其itemTpl定义如下:
itemTpl: "<div class=\"list-item-title\">{item_name}{item_qty}</div><div class=\"list- item-narrative\">{item_detail}</div>
我的app.css定义如下所示。我希望我的“item_name”位于列表的最左侧,而item_qty位于同一行的最右侧。我可以使用多个空格(&amp; nbsp),但我希望两个项目之间有一些相对间距。
当我为{item_name}和{item_qty}使用2个不同的div元素时,它们出现在2个不同的行中,而不在列表中。
itemTpl: "<div class=\"list-item-title\">{item_name}</div><div class=\"list-item-qty\">{item_qty}</div><div class=\"list-item-narrative\">{item_detail}</div>
app.css
/* Increase height of list item so title and narrative lines fit */
.x-list .x-list-item .x-list-item-label
{
min-height: 3.5em!important;
}
/* Move up the disclosure button to account for the list item height increase */
.x-list .x-list-disclosure {
position: absolute;
bottom: 0.85em;
right: 0.44em;
}
.list-item-title
{
float:left;
width:100%;
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
line-height:150%;
margin-right:520px;
}
.list-item-narrative
{
float:left;
width:95%;
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
}
.x-item-selected .list-item-title
{
color:#ffffff;
}
.x-item-selected .list-item-narrative
{
color:#ffffff;
}
.notes-list-empty-text
{
padding:10px;
}
答案 0 :(得分:2)
您的itemTpl看起来像:
itemTpl: "<div class=\"list-item-title\">{item_name}</div><div class=\"list-item-qty\">{item_qty}</div><div class=\"list-item-narrative\">{item_detail}</div>
但你的app.css错了。缺少一个课程:list-item-qty
试试这个:
/* Increase height of list item so title and narrative lines fit */
.x-list .x-list-item .x-list-item-label
{
min-height: 3.5em!important;
}
/* Move up the disclosure button to account for the list item height increase */
.x-list .x-list-disclosure {
position: absolute;
bottom: 0.85em;
right: 0.44em;
}
.list-item-title
{
float:left;
/*width:100%; //this can't be 100% width*/
width: 75%; //could be more if you need
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
line-height:150%;
/*margin-right:520px;*/
}
.list-item-qty
{
float:right;
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px; //You will need that when onItemDisclosure is set to true
line-height:150%;
clear: right;
}
.list-item-narrative
{
float:left;
width:95%;
font-size:90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right:25px;
}
.x-item-selected .list-item-title
{
color:#ffffff;
}
.x-item-selected .list-item-narrative
{
color:#ffffff;
}
.notes-list-empty-text
{
padding:10px;
}