煎茶觸摸2：如何在列表中顯示的項目

Question

我動態加載從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位於同一行的最右側。我可以使用一些空格（& 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; 
} 

Answer 1

你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; 
}