Extjsグリッド限界列の表示/非表示のチェック

Question

グリッドの列のチェック/非表示を制限したい。デフォルトのextjsグリッドで、beforeselectのイベントまたは設定を列メニューcheckboxesに適用したいとします。最大許容列が選択され、ユーザーが列をさらに確認しようとすると、エラーメッセージが表示されます。

私は、事前におかげで案内してください。

Answer 1

エラーメッセージがユーザーを迷惑にしているので、私はそのエラーメッセージの処理をしません。最大に達したとき、私はこのように、columnshowイベントに未チェックの列を無効になります。

var doCheckItems = function() { 
      var showncolumns = Ext.Array.sum(grid.headerCt.query("gridcolumn").map(function(column) {return column.isVisible()?1:0;})); 
      if(showncolumns >= 5) { 
       Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) { 
        if(!item.checked) item.disable(); 
       }) 
      } else { 
       Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) { 
        item.enable(); 
       }) 
      } 
     }; 

    grid.headerCt.on('columnshow',doCheckItems); 
    grid.headerCt.on('columnhide',doCheckItems); 

https://fiddle.sencha.com/#fiddle/1fkj

しかし、あなたはまだしたい場合、あなたはmenucheckitemsにbeforecheckchangeイベントにバインドすることができます

var doCheckChange = function() { 
    var showncolumns = Ext.Array.sum(grid.headerCt.query("gridcolumn").map(function(column) {return column.isVisible()?1:0;})); 
    if(showncolumns >= 5) { 
     Ext.Msg.alert('Error','Too many columns checked'); 
     return false; 
    } 
}; 
Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) { 
    item.on('beforecheckchange', doCheckChange); 
}); 

https://fiddle.sencha.com/#fiddle/1fkl