View Full Version : XTemplate custom row in a ListView

23 Sep 2009, 9:26 AM
I'm trying to move my Grids to Listviews to reduce overhead. However as far as I can tell you cannot have a custom renderer but use XTemplates instead. Problem for me is despite a good hour or two searching the forums and looking at the docs I cannot get my head around XTemplates.

I simply want one row in my ListView to be bold. This was easy with a renderer on each column in my grid ColumnModel.

function renderTotal(value, p, record){
// set col colour to light blue
if (record.data['name'] == 'Total')
p.attr = 'style="font-weight:bold;color:#ff8080;"';

Despite tinkering I cannot get this to work using an XTemplate. I'm not even going to post my code so far as it's not doing anything. I'm sure it's just as simple, but I'm having no joy. Can someone give me some suggestions please? XTemplates seem wonderful, but the documentation just isn't enough for me.

23 Sep 2009, 3:06 PM
Try something like this in your column definition:

header: 'Total',
dataIndex: 'total',
width: .15,
align: 'right',
tpl: '<b>{total}</b>'

Of course, you can get fancier:

tpl: '<span class="total-style">{total}</span>'

Or instantiate a template and assign it to tpl.

24 Sep 2009, 2:38 AM
Thanks, but that will make the 'total' column bold, I want just one row. Indeed, sometimes I might want just one particular cell.

I've just started looking at the ListView, can I render icons, and styles for particular columns, rows and/or cells like the Grid? I find the documentation on it a little scant.