ExtJS 4 CheckboxModel在使用模式MULTI时如何允许取消选择

时间:2011-10-21 15:32:51

标签: extjs extjs4

我们在我们的应用程序中使用了一个checkboxmodel,它要求我们允许选择网格中的多个项目。因此,我们必须在复选框模型中设置模式:'MULTI'。

默认行为要求用户在使用此配置时按住CTRL并单击某个项目以取消选择该项目。我想覆盖默认行为,以允许用户通过再次单击它来取消选择列表中的项目。 checkboxModel的allowDeselect配置只能在mode设置为SINGLE时使用,而且我们再次使用MULTI。

非常感谢任何关于在ExtJS 4中覆盖此行为的建议!

3 个答案:

答案 0 :(得分:5)

您的意思是mode: 'SIMPLE'吗?

  

mode:String
选择模式。有效值为:

     
      
  • SINGLE - 仅允许一次选择一个项目。使用allowDeselect允许取消选择该项。这是默认设置。
  •   
  • SIMPLE - 允许逐个简单地选择多个项目。每次点击网格都会选择或取消选择一个项目。
  •   
  • MULTI - 允许使用Ctrl和Shift键复杂选择多个项目。
  •   

尝试一下:DEMO

应该工作3+。我不认为这种配置是新的。

答案 1 :(得分:1)

试试这个:

// Allow deselecting the only selected record in MULTI mode with a simple click.
// Note that this will only happen when allowdeselect is true
Ext.override( Ext.selection.Model, {
    selectWithEvent: function(record, e, keepExisting) {
        var me = this;

        switch (me.selectionMode) {
            case 'MULTI':
                if (e.ctrlKey && me.isSelected(record)) {
                    me.doDeselect(record, false);
                } else if (e.shiftKey && me.lastFocused) {
                    me.selectRange(me.lastFocused, record, e.ctrlKey);
                } else if (e.ctrlKey) {
                    me.doSelect(record, true, false);
                // Mod Start
                } else if (me.isSelected(record) && !e.shiftKey && !e.ctrlKey && me.selected.getCount() == 1 && me.allowDeselect) {
                    me.doDeselect(record, false);                    
                // Mod End                        
                } else if (me.isSelected(record) && !e.shiftKey && !e.ctrlKey && me.selected.getCount() > 1) {
                    me.doSelect(record, keepExisting, false);
                } else {
                    me.doSelect(record, false);
                }
                break;
            case 'SIMPLE':
                if (me.isSelected(record)) {
                    me.doDeselect(record);
                } else {
                    me.doSelect(record, true);
                }
                break;
            case 'SINGLE':
                // if allowDeselect is on and this record isSelected, deselect it
                if (me.allowDeselect && me.isSelected(record)) {
                    me.doDeselect(record);
                // select the record and do NOT maintain existing selections
                } else {
                    me.doSelect(record, false);
                }
                break;
        }
    },
});

答案 2 :(得分:0)

在ExtJS 4中,如果需要移位键选择,则覆盖'onRowSelection;多种选择的方法和修改条件“if(mode!=='SINGLE'&& mode!=='MULTI')”