View Full Version : [CLOSED][3.1] Sort ASC/DESC arrows doesn't display.

5 Jan 2010, 12:58 AM
Hi All.

My grid doesn't display ASC/DESC arrows when I try to sort by click on the headers.

Have a look at updateSortIcon() function in GridView.js I realized that there is something wrong with select() function.

Here is updateSortIcon() function:

// private
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td').removeClass(sc);
hds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]);

The problem here is this.mainHd.select('td') return all td element of page instead of return all td inside this.mainHd dom, ofcouse css class also add to incorrect td element.

Did I make something wrong or this is a bug?

5 Jan 2010, 11:28 PM
mainHd contains a reference to the first row of the grid, which are the headers.
I haven't seen any issues with the sort arrows, and all the ExtJS 3.1 examples are also displaying the sort header icon properly. I'm even using the ColumnHeaderGrouping plugin where I can have more than one row of headers, still the sort direction icon shows up at the right column.

Have you customized or overridden this function in your code? Can you submit a test case?

8 Jan 2010, 12:02 PM
I too am not getting sort icons using the xtheme-blue.

20 Jan 2010, 2:04 PM
Spidy, I am having the same issue where the select is pulling all the 'td' elements from the page. I added the following override to solve the problem.

Ext.override(Ext.grid.GridView, {
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-hd').removeClass(sc);
hds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]);
I changed this.mainHd.select('td') to this.mainHd.select('td.x-grid3-hd') and it works for my purposes because I only have one grid on the page.

I have not been able to figure out why this.mainHd.select() is pulling elements from the entire page. And like tonedeaf mentions, I have been unable to figure out why this isn't an issue on the extjs example grids.

20 Jan 2010, 5:45 PM
Can anyone produce a test case? I did something like this to create td elements:

var el = Ext.getBody().createChild({
el.dom.innerHTML = '<table><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr></table>';
var grid = new Ext.grid.GridPanel({
width: 400,
height: 400,
renderTo: document.body,
store: [1],
columns: [{
header: 'a', dataIndex: 'field1', sortable: true

But it still sorts as I would expect.

21 Jan 2010, 7:37 AM
Here you go evant, below is an example of the issue. Notice that if you remove the toolbar there is no problem, but with the toolbar the sort-asc/sort-desc class does not get added.

<link rel="stylesheet" type="text/css" href="/ext-3.1/resources/css/ext-all.css" />
<div id=navigation_for_layout></div>
<div id="main_grid_panel"></div>

<script type="text/javascript" src="/ext-3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.1/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function () {

toolbar_menu = new Ext.Toolbar({
style: 'margin-bottom: 10px;',
items: [{
text: 'People',
menu: new Ext.menu.Menu({
items: [{
text: 'Search',
handler: function () {
window.location = '/people';


grid_people = new Ext.grid.GridPanel({
border: true,
height: 454,
store: new Ext.data.SimpleStore({
fields: ['first_name', 'last_name', 'status'],
data: [
cm: new Ext.grid.ColumnModel([
header: "First Name",
id: 'first_name',
dataIndex: 'first_name',
hidden: false,
hideable: false,
sortable: true
header: "Last Name",
id: 'last_name',
dataIndex: 'last_name',
hidden: false,
sortable: true
header: "Status",
id: 'status',
dataIndex: 'status',
hidden: false,
sortable: true



21 Jan 2010, 7:44 AM
Not seeing it with the SVN version. Can you try the 3.1.1 beta?

21 Jan 2010, 7:55 AM
Is the 3.1.1 beta the same thing as the 3.1.x branch?

21 Jan 2010, 9:00 AM
It looks like it has been resolved in the 3.1.x branch.

21 Jan 2010, 9:16 AM
Cool, I'll mark this as closed.