Extension:HighlightSort (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: Highlight the grid column that is currently used for sorting by applying a custom css class to each cell. Uses different classes for ascending/descending sort. |
| Author: BitPoet |
| Published: 2009-09-24 |
| Version: 0.1a |
| Ext Version: Ext2.2/Ext3.0 |
| License: http://en.wikipedia.org/wiki/WTFPL |
| Demo Link: View Demo |
| Forum Post: View Post |
Ext.ux.plugins.grid.highlightSort
Applies a css class (one for ascending and a different one for descending sort) to each cell in the column which is currently sorted by. The extension itself is quite small, but it contains a trick by hooking onto the GridView's 'afterMove' event with a createSequence call to keep the css over column moves too.
Adding highlightSort as a plugin to your GridPanel gives you a new config parameter 'highlightClasses' which takes an object with css class names for 'ASC' and 'DESC' sort order. You can of course assign identical class names.
...GridPanel config...
/* Start of highlightSort demo configuration */
highlightClasses: {
ASC: 'x-custom-sort-asc'
// DESC stays at default = x-ux-col-sort-desc
},
plugins: [ new Ext.ux.plugins.grid.highlightSort({}) ],
..rest of GridPanel config...
You can now format your cells to your liking with a simple css definition like
x-custom-sort-asc: { background-color: lightred !important; }
Changes
- none yet