删除在格子ExtJS 4中选择特定行的能力 [英] Remove ability to select specific rows in grid ExtJS 4

问题描述

我使用CheckboxModel

  selModel：Ext.create（'Ext.selection.CheckboxModel'，{
 mode：'SIMPLE'
}）
  / pre> 
 
 
要禁用选择，我使用beforeselect事件
  beforeselect： function（row，model，index）{
 if（model.data.id =='3'）{
 return false; 
} 
} 
  
并隐藏复选框我使用特定的类为行和css规则
  viewConfig：{
 getRowClass：function（record，index）{
 var id = record获得（ 'ID'）; 
 return id =='3'？ '一般规则' ： ''; 
} 
} 
 
 .general-rule .x-grid-row-checker {
 left：-9999px！important; 
 position：relative; 
} 
  
也许这不是实现所需结果的最佳方式，但对于我
 
 
 
但是，出现另一个问题：在网格标题中选择全部/取消选中全部复选框停止工作。当您首次点击此ckechbox时，所有行除了不应选择的行将选择，但如果再次单击，则不会发生任何事情。显然，系统尝试重新选择所有行，因为没有选择。
 
 
 
有更好的方法来解决问题吗？或者如何解决这个方法的一个问题。
 
 
 
唯一需要注意的是，您需要重写选择全部/取消选择功能为复选框，但我不知道我该怎么做。
 
 
 
提前感谢您的答案，如果我提出我的问题不符合规则，我道歉。 
解决方案
我的任务的最终解决方案（删除按其id选择特定行的能力）如下： p> 
 
 
如果需要，覆盖 selectAll （和 unselectAll ）方法，当您定义选择模型以忽略spicified行时：
  selModel：Ext.create（'Ext.selection.CheckboxModel'，{
 mode：'SIMPLE'，
 select ：function（records，keepExisting，suppressEvent）{
 if（Ext.isDefined（records））{
 this.doSelect（records，keepExisting，suppressEvent）; 
} 
} 
 selectAll：functi on（suppressEvent）{
 var me = this，
 choices = me.store.getRange（）; 
 
 for（var key in choices）{
 if（choices [key] .data.id =='3'）{
 choices.splice（key，1）; 
 break; 
} 
} 
 
 var i = 0，
 len = choices.length，
 selLen = me.getSelection（） 
 
 if（len！= selLen）{
 me.bulkChange = true; （; i  {
 me.doSelect（choices [i]，true，suppressEvent）; 
} 
删除me.bulkChange; 
 
 me.maybeFireSelectionChange（me.getSelection（）。length！== selLen）; 
} 
 else {
 me.deselectAll（suppressEvent）; 
} 
} 
}）
  
使用 beforeselect 事件禁止指定行的选择：
  beforeselect：function（row，model，index）{
 if（model.data.id =='3'）{
 return false; 
} 
} 
  
对指定的行和相应的对象使用一个特殊的类css规则隐藏指定的行：
  viewConfig：{
 getRowClass：function（record，index）{
 var id = record.get（'id'）; 
 return id =='3'？ '一般规则' ： ''; 
} 
} 
 
 .general-rule .x-grid-row-checker {
 left：-9999px！important; 
 position：relative; 
} 
  
感谢 Evan Trimboli 的建议！ > 
I have to remove ability to select some rows in my grid.

I use CheckboxModel
selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE'
} )
To disable selection I use beforeselect event
beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}
And to hide checkbox I use specific class for row and css rule
viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}
Perhaps this is not the best way to achieve the desired result, but for my task it works.

However, another problem appear: Select All / Unselect All checkbox in grid header stops working. When you first click on this ckechbox all lines except those that should not be selected will select, but if you click again, nothing happens. Obviously, the system tries to re-select all rows, as there are unselected.

Is there a better way to solve the problem? Or how to solve a problem with this method.

The only thing that comes to mind - you need to rewrite the Select All / Unselect All functions for checkbox, but I not sure how I can do it.

Thanks in advance for your answers and I apologize if I made my question is not according to the rules.
解决方案
The final solution for my task (remove the ability to choose a specific row by its id) is as follows:

Override selectAll (and unselectAll if needed) method when you define selection model to ignore spicified rows:
selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE',
    select: function(records, keepExisting, suppressEvent) {
        if (Ext.isDefined(records)) {
            this.doSelect(records, keepExisting, suppressEvent);
        }
    },
    selectAll: function( suppressEvent ) {
        var me = this,
            selections = me.store.getRange();

        for( var key in selections ) {
            if( selections[key].data.id == '3' ) {
                selections.splice( key, 1 );
                break;
            }
        }

        var i = 0,
            len = selections.length,
            selLen = me.getSelection().length;

        if( len != selLen ) {
            me.bulkChange = true;
            for (; i < len; i++) {
                me.doSelect(selections[i], true, suppressEvent);
            }
            delete me.bulkChange;

            me.maybeFireSelectionChange(me.getSelection().length !== selLen);
        }
        else {
            me.deselectAll( suppressEvent );
        }
    }
} )
Use beforeselect event to disable selection for specified rows:
beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}
Use a special class for the specified rows and the corresponding css rule to hide specified rows:
viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}
Thanks Evan Trimboli for advice!

                        
这篇关于删除在格子ExtJS 4中选择特定行的能力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！