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:
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.
Follow me:
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015