CODEWITHSUNDEEP
extjs
David Smithson
David Smithson

Reputation: 464

Alternate row colours in ExtJS view.View

I have an ExtJS 4.2 view.View (dataView) using a template, store and model; pretty much as the documentation describes, and the information is displayed fine.

I now need to alternate the background colour of each item. How is this best accomplished?

There aren't any easy config options to do this like Sencha Touch's striped: true, or any inherent styling like in the grid.Panel; I have looked for a listener that would allow for setting the tpl and itemSelector for each item, but there doesn't seem to be anything listed that would suffice.

Code:

Ext.define('productionHistoryModel', {
    extend: 'Ext.data.Model',
    fields: [ 'Date', 'Fore_Name', 'Event', 'Comments' ]
});

var productionHistoryStore = Ext.create('Ext.data.Store', {
    id: 'productionHistoryStore',
    storeId: 'productionHistoryStore',
    model: 'productionHistoryModel'
});

var historyTpl1 = new Ext.XTemplate(
    '<tpl for=".">',
    '<div style="margin-bottom: 10px;" class="x-grid-row">',
    '<span style="font-weight: bold;">{Date}: {Event} ({Fore_Name})</span>',
    '<br/><span>{Comments}</span>',
    '</div>',
    '</tpl>'
);

var productionHistoryView = Ext.create('Ext.view.View', {
    id: 'productionHistoryView',
    store: productionHistoryStore,
    tpl: historyTpl1,
    itemSelector: 'div.x-grid-row',
    emptyText: 'No logs available',
    disableSelection: true,
    autoScroll: true,
    maxHeight: 500
});

Upvotes: 0

Views: 2306

Answers (1)

matt
matt

Reputation: 4047

You're using a view which means you're defining the HTML to be generated yourself, using a XTemplate. That is why there is no built-in feature for striped rows, since the framework simply doesn't know which HTML will be rendered.

The simplest solution is to add a class attribute to each row in your template indicating whether the row number is odd or even, and then use CSS to style the rows accordingly.

Actually there already is an example in the documentation of Ext.XTemplate (scroll down to "Execute arbitrary inline code with special built-in template variables"):

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>'
 );

The corresponding CSS code would look like:

.odd {
    background-color: white;
}
.even {
    background-color: gray;
}

Upvotes: 1

Related Questions