Ext.grid.column.Click 이벤트를 전체 셀 영역이 아닌 CheckBox 자체에 적용하십시오.

Question

열의 동작을 확인란만으로 제한하고 셀 영역을 제한하는 방법이 있습니까? 문서에서 복사 한 체크 열의 샘플 코드.

var store = Ext.create('Ext.data.Store', { 
    fields: ['name', 'email', 'phone', 'active'], 
    data: [{ 
     name: 'Lisa', 
     email: 'lisa@simpsons.com', 
     phone: '555-111-1224', 
     active: true 
    }, { 
     name: 'Bart', 
     email: 'bart@simpsons.com', 
     phone: '555-222-1234', 
     active: true 
    }, { 
     name: 'Homer', 
     email: 'homer@simpsons.com', 
     phone: '555-222-1244', 
     active: false 
    }, { 
     name: 'Marge', 
     email: 'marge@simpsons.com', 
     phone: '555-222-1254', 
     active: true 
    }] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody(), 
    store: store, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }, { 
     xtype: 'checkcolumn', 
     text: 'Active', 
     dataIndex: 'active' 
    }] 
}); 

친절하게 도와주세요.

Answer 1

이 솔루션은 4.2.0에서 4.2.6까지의 모든 ExtJS 버전에서 작동합니다.

Ext.define('CheckColumn', { 
    override: 'Ext.grid.column.' + (!!Ext.grid.column.Check ? 'Check': 'CheckColumn'), 
    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) { 
     var me = this, 
      key = type === 'keydown' && e.getKey(), 
      mousedown = type == 'mousedown'; 

     if (mousedown && !Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')) { 
      return !me.stopSelection; 
     } 

     me.callParent([type, view, cell, recordIndex, cellIndex, e, record, row]); 
    } 
}); 

Answer 2

guiherme lopes 응답에 기초하여 beforecheckchange에서 수정 사항을 적용했습니다.

beforecheckchange: function(me , rowIndex , checked , record , e , eOpts){ 
      if(!Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')){ 
       return false; 
      } 
      return true; 
     }