Learn from Saki: Styling ExtJS grid rows using getRowClass()

Description

The example shows how to use Ext.grid.View method getRowClass to style individual rows or the grid. Here we change only grid background color but it is possible to change the font weight (bold/normal), font color or other attributes.

Main Features

implements getRowClass
uses data from static JSON file
uses MVC with model, proxy, reader, store, view and controller
uses SASS to create CSS needed for grid rows colors
uses CSS3 to create “icons” for buttons
plays well with any other grid extension, plugin or feature
any number of grid instances can be created

Use Cases

Use it anytime when you need to distinguish a grid row from others, for example, when a row is new or dirty, or when it requires attention for any reason.

Do not use it when you need to style individual grid cells.

Example Files (relative to example root)

The example has been initially generated with sencha generate app so the following list contains only added or edited files:

index.html
app.js
app.json

app/Application.js
app/model/PersonModel.js
app/store/PersonStore.js
app/view/DemoGridView.js
app/view/GridToolbarView.js
app/controller/MainController

sass/var/view/DemoGridView.scss
sass/var/view/GridToolbarView.scss
sass/src/view/DemoGridView.scss
sass/src/view/GridToolbarView.scss

resources/person.json

Source Code

If you want to see the example code, login or sign-up. Free membership is available.

Follow me:

saki

I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.