Assuming I understand and have implemented correctly, it appears that CellModel.deselectAll does not work as documented.

I have a listener setup for the 'select' event on a cell. After selecting a cell and handling the event the underlying store is reloaded with new data. This causes the 'select' event to fire.

According to the documentation, using CellModel.deselectAll should prevent this.


Ext version tested:
  • Ext 4.0.2a
Browser versions tested against:
  • FF6 (firebug 1.8.1 installed)
  • Calling CellModel.deselectAll does not work. As a result, reloading a Grid's store causes the select event to fire for a previously selected grid position.
Steps to reproduce the problem:
  • Run the code below.
The result that was expected:
  • The 'select' event does not fire when reloading the store.
The result that occurs instead:
  • The 'select' event is still triggered.
Test Case:

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title> Test Extjs4 bug </title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/bootstrap.js"> </script>
    <script type="text/javascript" src="extjs/ext-all.js"> </script>

    <script type="text/javascript">

  var Store_test = new Ext.data.Store({
        // store configs
        autoDestroy: true,

        fields: [
        data: [
                { foo: '123', bar: '456' },
                { foo: 'aaa', bar: 'bbb' }


  var GridPanel_test = Ext.create('Ext.grid.Panel', {
        height: 100,
        width: 200,

        renderTo: 'test-div',

        store: Store_test,
        columns: [
                id:             'foo',
                header:         'Foo',
                dataIndex:      'foo',
                flex:           1 
            }, {
                id:             'bar',
                header:         'Bar',
                dataIndex:      'bar',
                flex:           1

        selModel: new Ext.selection.CellModel({
                listeners: {
                        select: function( cellModel, dataRecord, RowIndex, ColumnIndex ) {
                                alert("When the store is reloaded this should not be seen.");


  var newData = [
        [ '0x4141', '0x4242'],
        [ '2333k',  'z02sl' ]

  var Button = Ext.create('Ext.Button', {
        text: 'Click to load Store',
        renderTo: 'button-div',
        handler: function() {
                // Call deselectAll to prevent the select handler
                // from being called.  ( The bug !? )

                // Load the store with new data

// -->

<h2> CellModel.deselectAll Bug PoC </h2>
  1.> First click a grid cell.  The 'select' listener will trigger a 
  popup window.
  2.> Now click the button to reload the store.  The button's handler
  will first call Grid.selectionModel.deselectAll and then 
  3.> Note that the 'select' listener was triggered.


<div id="button-div">
<div id="test-div">


Screenshot or Video:
  • None
Debugging already done:
  • none
Possible fix:
  • not provided
Additional CSS used:
  • only default ext-all.css
Operating System:
  • Multiple (OSX,BSD)