2013-08-09 5 views
5

Ich muss die Möglichkeit entfernen, einige Zeilen in meinem Grid auszuwählen.Entferne die Fähigkeit, bestimmte Zeilen im Grid auszuwählen ExtJS 4

Ich benutze CheckboxModel

selModel: Ext.create('Ext.selection.CheckboxModel', { 
    mode: 'SIMPLE' 
}) 

Auswahl zu deaktivieren I Before Ereignis

beforeselect: function (row, model, index) { 
    if (model.data.id == '3') { 
     return false; 
    } 
} 

verwenden und Kontrollkästchen verstecken ich bestimmte Klasse für Zeile und CSS-Regel verwenden

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; 
} 

Vielleicht ist nicht der beste Weg, um das gewünschte Ergebnis zu erzielen, aber für meine Aufgabe funktioniert es.

Es erscheint jedoch ein weiteres Problem: Alle auswählen/Alle Auswahl aufheben Checkbox im Grid-Header funktioniert nicht mehr. Wenn Sie zum ersten Mal auf dieses Kontrollkästchen klicken, werden alle Zeilen mit Ausnahme derjenigen ausgewählt, die nicht ausgewählt werden sollen. Wenn Sie jedoch erneut klicken, passiert nichts. Offensichtlich versucht das System, alle Zeilen erneut auszuwählen, da sie nicht ausgewählt sind.

Gibt es einen besseren Weg, um das Problem zu lösen? Oder wie man ein Problem mit dieser Methode löst.

Die einzige Sache, die in den Sinn kommt - müssen Sie die Alle auswählen/Alle Auswahl Funktionen für Kontrollkästchen, aber ich bin mir nicht sicher, wie ich es tun kann.

Vielen Dank im Voraus für Ihre Antworten und ich entschuldige mich, wenn ich meine Frage nicht nach den Regeln gemacht habe.

Antwort

2

Die endgültige Lösung für meine Aufgabe (entfernen Sie die Möglichkeit, eine bestimmte Zeile durch seine ID zu wählen) ist wie folgt:

Aufschalten selectAll (und UnselectAll falls erforderlich) Methode, wenn Sie Auswahlmodell definieren spicified Zeilen ignorieren:

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); 
     } 
    } 
}) 

Verwenden Before Ereignisauswahl für bestimmte Zeilen zu deaktivieren:

beforeselect: function (row, model, index) { 
    if (model.data.id == '3') { 
     return false; 
    } 
} 

Verwenden Sie eine Sonderklasse für die angegebenen Zeilen und die entsprechende CSS-Regel angegebenen Zeilen zu verbergen:

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; 
} 

Dank Evan Trimboli um Rat!

1

Derzeit sind keine integrierten Funktionen vorhanden, um diese Funktionalität zu ermöglichen. Das Header-Kontrollkästchen ruft selectAll und deselectAll auf, sodass Sie diese Methoden überschreiben müssen, um sie pro Datensatz zu verhindern.