2013-08-09 13 views
5

Devo rimuovere la possibilità di selezionare alcune righe nella mia griglia.Rimuovi la possibilità di selezionare righe specifiche nella griglia ExtJS 4

Io uso CheckboxModel

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

Per disabilitare la selezione Io uso beforeselect evento

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

E per nascondere casella di controllo che uso classe specifica per riga e css regola

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

Forse questo non è il modo migliore per ottenere il risultato desiderato, ma per il mio compito funziona.

Tuttavia, viene visualizzato un altro problema: Seleziona tutto/Deseleziona tutto La casella di controllo nell'intestazione della griglia smette di funzionare. Quando clicchi su questo ckechbox tutte le linee tranne quelle che non dovrebbero essere selezionate selezioneranno, ma se clicchi di nuovo, non succede nulla. Ovviamente, il sistema tenta di riselezionare tutte le righe, poiché non sono selezionate.

C'è un modo migliore per risolvere il problema? O come risolvere un problema con questo metodo.

L'unica cosa che viene in mente - è necessario riscrivere il Seleziona tutto/Deseleziona Tutti funzioni per la casella di controllo, ma non sicuro di come posso farlo.

Grazie in anticipo per le vostre risposte e mi scuso se ho fatto la mia domanda non è secondo le regole.

risposta

2

La soluzione finale per il mio compito (togliere la possibilità di scegliere una riga specifica per la sua id) è il seguente:

Override selectAll (e unselectAll se necessario) metodo quando si definisce modello di selezione di ignorare righe spicified:

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

Uso beforeselect evento per disabilitare la selezione di righe specificato:

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

utilizzare una classe speciale per le righe specificate e la corrispondente regola CSS per nascondere righe specificato:

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

Grazie Evan Trimboli per un consiglio!

1

Attualmente non sono stati creati ganci per consentire tale funzionalità. La casella di controllo dell'intestazione chiama selectAll e deselectAll, quindi è necessario eseguire l'override di tali metodi per impedirlo su base record.

Problemi correlati