하나의 체크 열을 선택하면 EXTJS 그리드 패널에서 다른 체크 열을 선택하지 못하게하는 방법

Question

enter image description here 4 개의 체크 열이 포함 된 그리드 패널이 있습니다.

세 개의 열이 라디오 옵션처럼 작동해야합니다. 사용자가 한 열을 검사 할 때 다른 두 열을 확인할 수 없어야합니다.

네 번째 열은 독립적이어야하며 다른 세 열의 영향을받지 않아야합니다.

나는 ExtJS에 버전 5.1

Ext.define('MyApp.view.MyGridPanel', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.mygridpanel', 

    requires: [ 
     'MyApp.view.MyGridPanelViewModel', 
     'MyApp.view.MyGridPanelViewController', 
     'Ext.grid.column.Check', 
     'Ext.view.Table' 
    ], 

    controller: 'mygridpanel', 
    viewModel: { 
     type: 'mygridpanel' 
    }, 
    height: 250, 
    width: 400, 
    title: 'My Grid Panel', 

    columns: [ 
     { 
      xtype: 'checkcolumn', 
      dataIndex: 'string', 
      text: 'String' 
     }, 
     { 
      xtype: 'checkcolumn', 
      dataIndex: 'number', 
      text: 'Number', 
      listeners: { 
       checkchange: 'onCheckcolumnCheckChange' 
      } 
     }, 
     { 
      xtype: 'checkcolumn', 
      dataIndex: 'date', 
      text: 'Date' 
     }, 
     { 
      xtype: 'checkcolumn', 
      dataIndex: 'bool', 
      text: 'Boolean' 
     } 
    ] 
}); 

Answer 1

난 당신이 비활성화 할 수 있습니다 생각하고, 취소 당신이 아마 의미하지 않습니다를 사용하고?

절반 정도만 보이면 체크 열에 리스너를 사용합니다.

여기에 직접보기 :

onCheckcolumnCheckChange:function(column,rowIndex,checked,record){ 
    var gridHeader = column.up(); 
    gridHeader.items.each(function(col){ 
     if(checked && checked.dataIndex!='other' && col.xtype==='checkcolumn'&&col!==column){ 
      record.set(col.dataIndex,false); 
     } 
    }) 
} 

더 좋은 방법은이 작업을 수행 : https://fiddle.sencha.com/#view/editor&fiddle/1qpr

onCheckcolumnCheckChange:function(column,rowIndex,checked,record){ 
    var gridHeader = column.up(); 
    gridHeader.items.each(function(col){ 
     if(checked && col.xtype==='checkcolumn'&&col!==column){ 
      record.set(col.dataIndex,false); 
     } 
    }) 
} 

당신이 항상 dataIndex가 aswell 확인할 수 있습니다 특정 체크 컬럼에이 작업을 수행하려면 (특히 다른 항목을 검사 할 때 설정되지 않은 여러 개의 추가 검사 열이 필요한 경우) 열에 사용자 지정 속성을 추가 한 다음 확인해야합니다.

{ 
    xtype: 'checkcolumn', 
    dataIndex: 'date', 
    text: 'Date', 
    checkgroup: 'threecols', 
    listeners: { 
     checkchange: 'onCheckcolumnCheckChange' 
    } 
}, 

주 checkgroup 표준 설정/속성이 아닙니다 -하지만 당신은 (만큼 그들은 실제 사람과 충돌하지 않는 한)

것은 그런 다음 onCheckcolumnCheckChange 방법으로 확인할 수있는 사용자 정의 속성이 방법을 설정할 수 있습니다 this :

이 방법을 사용하면 여러 'checkgroup'값을 설정하는 여러 체크 박스 세트를 쉽게 사용할 수 있습니다.