PDA

View Full Version : NestedList layout question -- making a footer



colworx
22 Jul 2011, 1:02 PM
I'd like to make a NestedList for a shopping cart view that lets you tap on each item for a detail view, but also has order info and a checkout button at the bottom. I've had a lot of trouble going back and forth between using a List and a NestedList, but it seems like NestedList is the way to go because it is too difficult to replicate the detailview behavior with a List.

The problem I'm having with the NestedList is appending arbitrary html to the end of it. I recently tried to do this with XTemplate logic, but then the code shows up as a list item, which I don't want:


var data = {
'items': [
{
"id" : 20,
"name": "MacBook Pro",
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"name": "iPhone",
"price" : 20.99,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
},
{
"id" : 0
}
]
};





itemTpl: new Ext.XTemplate(
'<tpl if="id == 0">',
'<h1>Total</h1>',
'</tpl>',

'<tpl if="id &gt; 0">',
'<div class="cart-product-wrap">',
'<input id="qty-{id}" size="3" type="number" value="{quantity}" />',
'<label for="qty-{id}">QTY</label>',
'{name} ${price}',
'</div>',
'</tpl>'
),



Does anyone know the best way to put arbitrary HTML after a NestedList?