PDA

View Full Version : [FIXED-1005] right click toggles group and displays default browser context menu



csky
28 May 2010, 8:42 AM
Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

Chrome
IE8
FF3 (firebug 1.3.0.10 installed)
Safari 4


Operating System:

WinXP Pro


Description:

right click toggles group. this is a unexpected if you are trying to use the groupcontextmenu event


Test Case:

The following code is a modification of grouping.js from the ExtJS 3.2.1 examples directory


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;


// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});

var grid = new xg.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

}),
listeners:
{
groupcontextmenu: function()
{
console.log("groupcontextmenu called");
}
},
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: document.body
});
});



// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', ''],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', ''],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', ''],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
];




Steps to reproduce the problem:

Right click the "Finance" Industry group


The result that was expected:

The group does not toggle.


The result that occurs instead:

The group toggles.


Debugging already done:

yes


Possible fix:

Check button before calling toggle.




interceptMouse : function(e){
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if(hd){
e.stopEvent();
if (e.button == 0)
this.toggleGroup(hd.parentNode);
}
},

evant
28 May 2010, 8:23 PM
I've modified it so that it only collapses on left click.

The fact that it shwos the context menu is fine, it's consistent with the framework.