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.

Author:

Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?