ext js 4 网格多选

Question

I have grid

 Ext.define('a.view.a', {
     extend: 'Ext.grid.Panel',
     alias: 'widget.list',
     store: 'a.store.store',
     multiSelect: false,
     enableKeyEvents: true,

     initComponent: function() {
         var me = this;
         var user = TR.user;
         this.addEvents('edit');

         this.columns = [{
             dataIndex: 'Id',
             width: 50,
             align: 'center',
             sortable: false
         }];

         this.actions = {
             edit: Ext.create('Ext.Action', {
                 text: 'Изменить заявку',
                 icon: 'Content/Resources/images/editDoc.gif',
                 cls: 'selected-griditem-button',
                 handler: function() {
                     this.fireEvent('edit', this.getRequest());
                 },
                 scope: this
             })
         };

         var contextMenu = Ext.create('Ext.menu.Menu', {
             items: [
                 this.actions.edit
             ]
         });

         this.on({
             itemcontextmenu: function(view, rec, node, index, e) {
                 this.getSelectionModel().select(index);
                 e.stopEvent();
                 contextMenu.showAt(e.getXY());
                 return false;
             },
             beforeitemdblclick: function(gr, rowIndex, e) {
                 this.fireEvent('edit', this.getRequest());
             }
         });

         this.viewConfig = {
             listeners: {
                 itemkeydown: function(v, r, item, index, e) {
                     if (e.getKey() == e.DELETE) {
                         e.stopEvent();
                         this.fireEvent('del', this.getRequest());
                     }
                 },
                 scope: this
             }
         };

         this.callParent(arguments);
     },
     getRequest: function() {
         var sm = this.getSelectionModel();
         var rs = sm.getSelection();
         if (rs.length) {
             return rs[0];
         }
         return null;
     }
 });

in my controller i have function that exec when i click on item in grid

onSelectionChange: function (sm, rs) {
   alert('wtf');
}

Question is

1. when I click on item in grid first time I have messagebox with "wtf" second time on same item - don't have(this is good)

2. but when I do multiSelect: true each time when i click on same item I have message(this is not good:()

How can I do first variant, but with multiSelect: true

Answer 1

Use the 'itemclick' event instead of the 'selectionchange' event. Here's a standalone example:

Ext.onReady(function () {

    Ext.define('Model', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'field1'},
        ],
        idProperty: 'field1'
    });

    Ext.define('Grid', {
        extend: 'Ext.grid.Panel',
        multiSelect: true,

        initComponent: function () {
            this.store = Ext.create('Ext.data.ArrayStore', {
                model: 'Model',
                data: [
                    ['value1'],
                    ['value2'],
                    ['value3']
                ]
            });

            this.columns = [
                {dataIndex: 'field1', flex: 1}
            ];
            this.callParent(arguments);
        }
    });

    var grid = Ext.create('Grid', {
        renderTo: Ext.getBody()
    });

    grid.on('selectionchange', function (grid, selected, options) {
        console.log(selected);
    }, this);

    grid.on('itemclick', function (grid, record, item, index, e, options) {
        console.log('itemclick: ' + index);
    }, this);
});