0

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）を使用できますが、2つのアイテムの間にある程度の相対的な間隔が必要です。

{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;
}
4

1 に答える 1

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は間違っています。1つのクラスが欠落しています：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;
}
于 2012-09-04T12:18:11.083 に答える