View Full Version : ListView, alternating rows and highlighting selected row?

21 Oct 2010, 11:41 AM
Follows is some code I have for displaying a ListView with each line an alternating colour. The problem I am having is that when selecting a row (by clicking on it), only the rows without 'x-grid3-row-alt' are highlighting. I have looked around an I am not sure what the right approach is to test for a row being selected is, and then showing it is selected.

BTW Using ExtJS 3.3.0

var entryTplData = new Ext.XTemplate(
'<tpl for="." >',
'<span style="font-weight: bold; font-size: 12px">{title}</span><br/>',
'<span style="color: #888">Published: {publishedDate}</span><br/>',
'<div class="x-clear"></div>'

var listTplData = new Ext.XTemplate(
'<tpl for="rows">',
'<dl class="x-grid3-row {[xindex % 2 === 0? "" : "x-grid3-row-alt"]}">',
// '<dl class="x-grid3-row" style="background-color: {[xindex % 2 === 0 ? "white" : "#efefef"]}">',
'<tpl for="parent.columns">',
'<dt style="width:{[values.width*100]}%;text-align:{align};">',
'<em unselectable="on"<tpl if="cls"> class="{cls}"</tpl>>{[values.tpl.apply(parent)]}',
'</tpl><div class="x-clear"></div></dl></tpl>'

var resultsList = new Ext.list.ListView({

region: 'west',
title: 'Results',
layoutConfig: {
align: 'stretch',
pack: 'start',
collapsible: true
tpl: listTplData,
store: resultsStore,
singleSelect: true,
emptyText : 'No records to display',
width: 250,
columns: [{
header: 'Results',
tpl: entryTplData

21 Oct 2010, 1:14 PM
The solution I ended up using was some CSS, coupled with the existing code I had:

.x-list-body .x-grid3-row-alt {
background-color: #FFFFFF;

.x-list-body .x-grid3-row-alt.x-list-selected {
background-color: #DFE8F6;

.x-list-body .x-list-selected {
background-color: #DFE8F6;