ext js 4 网格多选答案

【问题标题】：ext js 4 grid multiselectext js 4 网格多选
【发布时间】：2012-12-19 09:50:19
【问题描述】：

我有网格

 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;
     }
 });

在我的控制器中，当我单击网格中的项目时，我具有执行功能

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

问题是

当我第一次单击网格中的项目时，我在同一项目上第二次出现带有“wtf”的消息框 - 没有（这很好）
但是当我做 multiSelect: true 每次当我点击同一个项目时，我都会收到消息（这不好：()

我怎样才能做第一个变种，但使用multiSelect: true

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

使用“itemclick”事件而不是“selectionchange”事件。这是一个独立的示例：

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);
});

【讨论】：