View Full Version : Grid Sort on Click disabled after Column Move

11 Jul 2007, 1:48 PM
Myappologies if this is a feature :}...After dragging and dropping a column inside the grid, the mouse click for sorting the column seems to be diabled, however, the right click context comes up ok.

Also, the container for my grid is positioned at the bottom of the page, so when selecting columns from context menu, the columns dialog is positioned above the area where accessible...


11 Jul 2007, 5:38 PM
What version are you using?

I ran into what sounds like the same bug (http://extjs.com/forum/showthread.php?t=5733) and it has been fixed for some time.

11 Jul 2007, 7:07 PM
/:) @webbbret, please read this thread (http://extjs.com/forum/showthread.php?t=8887) before posting your next bug. thanks.

19 Jul 2007, 1:54 PM
I'm having the exact same problems as webbbret.
Problem 1: All grid column headers become unresponsive to mouse-over or left-click after one or more column moves.
Problem 2: The grid columns context menu does not position correctly when the column headers are close to the bottom edge of the browser window.

Here is all the necessary info.
- Ext 1.0.1a
- Prototype + Scriptaculous 1.7.1_beta3 (with effects.js) + ext-prototype-adapter.js

The problems were tested and verified on the following configurations:
1. Windows XP SP2: Firefox, IE6
2. Windows XP SP2: Firefox, IE7
3. Windows Vista Enterprise: IE7

Problem #2 did NOT exist on:
- Windows XP SP2: Safari 3.0.2

The html/js code to reproduce is here. Make sure you're using Ext 1.0.1a (http://extjs.com/deploy/ext-1.0.1a.zip), Prototype (http://www.prototypejs.org/assets/2007/6/20/prototype.js), and Scriptaculous 1.7.1 beta3 (http://script.aculo.us/dist/scriptaculous-js-1.7.1_beta3.zip). Note that the code example has all the libraries (except the CSS and resource) in the same folder as the HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Array Grid Example - with problem</title>
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script language="javascript" type="text/javascript" src="ext-prototype-adapter.js"></script>
<script language="javascript" type="text/javascript" src="ext-all-debug.js"></script>
<script language="javascript" type="text/javascript">
var Example = {
init : function(){
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
var data_set_model = [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

var ds1 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},data_set_model)
var ds2 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},data_set_model)
var ds3 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},data_set_model)
var ds4 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},data_set_model)

var column_set = [
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

var colModel1 = new Ext.grid.ColumnModel(column_set);
var colModel2 = new Ext.grid.ColumnModel(column_set);
var colModel3 = new Ext.grid.ColumnModel(column_set);
var colModel4 = new Ext.grid.ColumnModel(column_set);

var grid1 = new Ext.grid.Grid('grid-1', {
ds: ds1,
cm: colModel1,
autoExpandColumn: 'company'
var grid2 = new Ext.grid.Grid('grid-2', {
ds: ds2,
cm: colModel2,
autoExpandColumn: 'company'
var grid3 = new Ext.grid.Grid('grid-3', {
ds: ds3,
cm: colModel3,
autoExpandColumn: 'company'
var grid4 = new Ext.grid.Grid('grid-4', {
ds: ds4,
cm: colModel4,
autoExpandColumn: 'company'

Ext.onReady(Example.init, Example);
<body><div style="width:100%; text-align:center">
<div style="width:600px; margin:0 auto; text-align:left;">
<div id="grid-1" style="width:600px;height:300px;"><div></div></div>
<div id="grid-2" style="width:600px; height:300px"><div></div></div>
<div id="grid-3" style="width:600px; height:300px"><div></div></div>
<div id="grid-4" style="width:600px; height:300px"><div></div></div>

Screenshot of Problem #2:

Thanks for your help!

19 Jul 2007, 2:46 PM
This has already been fixed. Time to upgrade to 1.1.