The example shows how to use
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.
- 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 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