PDA

View Full Version : [CLOSED-465][3.1] CheckboxSelectionModel with checkOnly:true in destroys focus



GustavR
21 Jan 2010, 7:06 AM
Ext version tested:

Ext 3.1.0


Adapter used:

ext


css used:

only default ext-all.css



Browser versions tested against:

IE6
IE7
IE8
FF3.0

In FF3.5 its working

Operating System:

Win7 Ultimate
WinXP Pro


Description:
Using CheckboxSelectionModel with config option checkOnly set to true in EditorGridPanel with config option clicksToEdit set to 1:
Editor doesn't show up when you click in the next cell, only when you click twice


Test Case:
don't mind the labels/headers, just cross-copied this test-case from two examples
copy this into examples/grid/<foobar>.html



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<style type="text/css">

</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->

<!-- page specific -->

<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript">

Ext.onReady(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']
];


/**
* Handler specified for the 'Available' column renderer
* @param {Object} value
*/
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
}

// shorthand alias
var fm = Ext.form;

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
new Ext.grid.CheckboxSelectionModel(),
{
id: 'company',
header: 'Company Name',
dataIndex: 'company',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}, {
header: 'Last Change',
dataIndex: 'lastChange',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
}
]
});

// create the Data Store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

store.loadData(myData);

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'company', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
sm: new Ext.grid.CheckboxSelectionModel({
checkOnly: true
})
});

});
</script>

</head>
<body>
<div id="editor-grid"></div>
</body>
</html>
Steps to reproduce the problem:

click into an cell -> editor opens
click into another cell only once


The result that was expected:

old editor closes, new editor (editor of cell clicked into) opens at the first click


The result that occurs instead:

the old editor closes, the new one doesn't open (in FF it opens like for a quarter second and then closes again)


Debugging already done:
seems to have something to do with the focus not longer being fired, because the handleMouseDown is set to emptyFn, see possible fix…

Possible fix:
this one helped at my side:

Ext.grid.CheckboxSelectionModel


constructor : function(){
Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);

if(this.checkOnly){
this.handleMouseDown = this.handleMouseDownCheckOnly;
}
},

// private
handleMouseDownCheckOnly : function(g, rowIndex, e){
if(e.button !== 0 || this.isLocked()){
return;
}
var view = this.grid.getView();
view.focusRow(rowIndex); // !important
}

Jamie Avins
10 Feb 2010, 6:12 PM
Can you please confirm this is fixed in 3.1.1, I can no longer duplicate this issue given your test case.

Tested IE8, Chrome, FF3.5 (still works).