PDA

View Full Version : ListView Alternate row colors



ValterBorges
14 Jul 2009, 1:34 PM
How would i apply this type of xtemplate approach to this listview to make it alternate row colors? Or is there a better simpler way to do this without using the grid?


var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);



var columnsCompanies = [
{id:'Company',dataIndex: 'company',header: 'Company'},
{id:'Price',dataIndex: 'price',header: 'Price',align:'right',width:.1},
{id:'Change',dataIndex: 'change',header: 'Change',align:'right',width:.1},
{id:'PctChange',dataIndex: 'pctChange',header: 'Pct Change',align:'right',width:.15},
{id:'LastChange',dataIndex:'lastChange',header: 'Last Change',tpl: '{lastChange:date("m-d h:i a")}',align:'right',width:.2}
];


var listViewCompanies = new Ext.ListView({
store: storeCompanies,
applyTo: 'dCompanies',
width: 520,
height: 20,
autoHeight: false,
multiSelect: true,
columnResize: true,
columnSort: true,
hideHeaders: false,
emptyText: 'No Companies to display',
loadingText: 'loading...',
reserveScrollOffset: true,
columns: columnsCompanies
});

Animal
14 Jul 2009, 1:39 PM
Easiest to just postprocess the DOM structure using DomQuery

ValterBorges
14 Jul 2009, 1:54 PM
Thanks i will research this.

lincStar
4 Jan 2010, 5:11 AM
HI............
Did u get that??????????
If please post a sample code here please.......
I have same problem.............
Waiting for ur reply...........

Thanks in advance.............
Thanks,
LincStar

Animal
4 Jan 2010, 5:42 AM
Try the Store's load event with a delay.

Animal
4 Jan 2010, 5:57 AM
Try this override:



Ext.override(Ext.list.ListView, {
initComponent : function(){
if(this.columnResize){
this.colResizer = new Ext.list.ColumnResizer(this.colResizer);
this.colResizer.init(this);
}
if(this.columnSort){
this.colSorter = new Ext.list.Sorter(this.columnSort);
this.colSorter.init(this);
}
if(!this.internalTpl){
this.internalTpl = new Ext.XTemplate(
'<div class="x-list-header"><div class="x-list-header-inner">',
'<tpl for="columns">',
'<div style="width:{[values.width*100]}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',
'{header}',
'</em></div>',
'</tpl>',
'<div class="x-clear"></div>',
'</div></div>',
'<div class="x-list-body"><div class="x-list-body-inner">',
'</div></div>'
);
}
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'<tpl for="rows">',
'<dl class="{[this.getItemClass(values, xindex - 1)]}">',
'<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)]}',
'</em></dt>',
'</tpl>',
'<div class="x-clear"></div>',
'</dl>',
'</tpl>',
{
getItemClass: this.getItemClass
}
);
};

var cs = this.columns,
allocatedWidth = 0,
colsWithWidth = 0,
len = cs.length,
columns = [];

for(var i = 0; i < len; i++){
var c = cs[i];
if(!c.isColumn) {
c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';
c = Ext.create(c);
}
if(c.width) {
allocatedWidth += c.width*100;
colsWithWidth++;
}
columns.push(c);
}

cs = this.columns = columns;

// auto calculate missing column widths
if(colsWithWidth < len){
var remaining = len - colsWithWidth;
if(allocatedWidth < this.maxWidth){
var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;
for(var j = 0; j < len; j++){
var c = cs[j];
if(!c.width){
c.width = perCol;
}
}
}
}
Ext.list.ListView.superclass.initComponent.call(this);
},

getItemClass: function(rowData, index) {
return ((index & 1) != 0) ? "odd-row" : "even-row";
}
});


I'll add an FR for this.

lincStar
4 Jan 2010, 6:54 AM
Hey Thanks,

I just waiting for ur reply...................

And It works.............

Thanks once again...........

thank,
LincStar

KRavEN
26 Aug 2010, 12:40 PM
You could also provide tpl when defining the ListView

var listView = new Ext.ListView({
tpl : new Ext.XTemplate('<tpl for="rows">',
'<dl class="x-grid3-row {[xindex % 2 === 0 ? "" : "x-grid3-row-alt"]}">',
'<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)]}',
'</em></dt></tpl><div class="x-clear"></div></dl></tpl>'
),
store : store,
multiSelect : true,
emptyText : 'No records to display',
reserveScrollOffset : true,
columns : [{
header : 'Company',
width : .4,
dataIndex : 'company'
}, {
header : 'Last Modified',
width : .2,
dataIndex : 'lastChange',
tpl : '{lastChange:date("m-d h:i a")}'
}, {
header : 'Price',
dataIndex : 'price',
align : 'right'
}]
});

No additional css needed