2012-04-06 12 views
15

Ich habe ein Raster, mit Checkcolumn. Es ist zum Beispiel dataIndex, 'checked'.Extjs checkcolumn disable für einige Zeilen, basierend auf Wert

Ich möchte Kontrollkästchen für einige Zeilen deaktivieren oder ausblenden, wo ein anderer Wert, beispielsweise 'can_be_checked', ist falsch/leer.

Renderer ist bereits in checkcolumn definiert, verwirren mit es bricht Generierung von Kontrollkästchen.

Wie kann ich es tun?

Antwort

25

Sie das Kontrollkästchen in den Renderer nur verstecken kann, zum Beispiel:

column.renderer = function(val, m, rec) { 
    if (rec.get('can_be_checked') == 'FALSE')) 
     return ''; 
    else 
     return (new Ext.ux.CheckColumn()).renderer(val); 
}; 
+0

Aber Renderer ist bereits in checkcolumn definiert. Ich möchte dieses Stück Code nicht verlieren oder wiederholen, es kann in neueren Versionen von extjs geändert werden. http://docs.sencha.com/ext-js/4-0/source/CheckColumn.html#Ext-ux-CheckColumn – Nameless

+0

Ich habe es bearbeitet. Probieren Sie die Lösung aus. – Aniketos

+0

+1 - war auf der Suche nach einem Weg, um die Checkbox sicher 'zu rendern', ohne ein 'wahr' oder 'falsch' im Feld zu bekommen. Danke. – horace

12

Ich war auf der Suche nach einer Lösung für diesen und über diese Frage kam, aber keine brauchbare Lösung überall eine deaktivierte Checkbox zu zeigen, statt KEINE Checkbox wie in der anderen Antwort beschrieben. Es war irgendwie beteiligt, aber hier ist, was ich tat (für 4.1.0):

  1. Ich fand, dass die extjs \ examples \ ux \ css \ CheckHeader.css Datei dass von Ext.ux.CheckColumn verwendet wird, nicht eine deaktivierte Klasse haben, so dass ich musste es ändern, um mehr wie die Standard-Checkbox Styling enthalten in ext-all.css (die eine deaktivierte Checkbox Klasse enthält) zu sein.

  2. Ich musste Ext.ux.CheckColumn erweitern, um zu verhindern, dass Ereignisse von deaktivierten Checkboxen abgefeuert werden.

  3. Schließlich musste ich meinen eigenen Renderer bereitstellen, um die deaktivierte Klasse gemäß meiner Logik anzuwenden.

Der Code ist wie folgt.

Modified CheckHeader.css:

.x-grid-cell-checkcolumn .x-grid-cell-inner { 
    padding-top: 4px; 
    padding-bottom: 2px; 
    line-height: 14px; 
} 
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner { 
    padding-top: 3px; 
} 

.x-grid-checkheader { 
    width: 13px; 
    height: 13px; 
    background-image: url('../images/checkbox.gif'); 
    background-repeat: no-repeat; 
    background-color: transparent; 
    overflow: hidden; 
    padding: 0; 
    border: 0; 
    display: block; 
    margin: auto; 
} 

.x-grid-checkheader-checked { 
    background-position: 0 -13px; 
} 

.x-grid-checkheader-disabled { 
    background-position: -39px 0; 
} 

.x-grid-checkheader-checked-disabled { 
    background-position: -39px -13px; 
} 

.x-grid-checkheader-editor .x-form-cb-wrap { 
    text-align: center; 
} 

Die URL Hintergrund-Bild oben zeigt auf diesem Bild, das normalerweise Schiffe mit extjs 4.1.0 unter: extjs \ resources \ themes \ Bilder \ default \ Form \ checkbox.gif.

extjs\resources\themes\images\default\form\checkbox.gif

Die erweiterte Ext.ux.CheckColumn Klasse, so dass Ereignisse nicht von behinderter checkcolumns gefeuert werden:

Ext.define('MyApp.ux.DisableCheckColumn', { 
    extend: 'Ext.ux.CheckColumn', 
    alias: 'widget.disablecheckcolumn', 

    /** 
    * Only process events for checkboxes that do not have a "disabled" class 
    */ 
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) { 
     var enabled = Ext.query('[class*=disabled]', cell).length == 0, 
      me = this; 

     if (enabled) { 
      me.callParent(arguments); 
     } 
    }, 

}); 

Implementierung mit benutzerdefinierten Renderer für behinderte Klasse gilt nach meiner eigenen Logik:

column = { 
    xtype: 'disablecheckcolumn', 
    text: myText, 
    dataIndex: myDataIndex, 
    renderer: function(value, meta, record) { 
     var cssPrefix = Ext.baseCSSPrefix, 
      cls = [cssPrefix + 'grid-checkheader'], 
      disabled = // logic to disable checkbox e.g.: !can_be_checked 

     if (value && disabled) { 
      cls.push(cssPrefix + 'grid-checkheader-checked-disabled'); 
     } else if (value) { 
      cls.push(cssPrefix + 'grid-checkheader-checked'); 
     } else if (disabled) { 
      cls.push(cssPrefix + 'grid-checkheader-disabled'); 
     } 

     return '<div class="' + cls.join(' ') + '">&#160;</div>'; 

    } 
}; 
+0

Dies funktioniert gut, um zu deaktivieren, aber 1 Problem, das ich bekomme, d. H. Wenn es aktiviert und deaktiviert ist und ich es überprüft, bleibt der Stil gleich und es ist nicht markiert. – aswininayak

+0

I hat dieses else { \t \t \t \t \t \t \t \t \t \t cls.push (cssPrefix + 'x-grid-checkheader'); \t \t \t \t \t \t \t \t \t} und es funktionierte für mich. Danke das ist mir wirklich sehr geholfen: P – aswininayak

1

fand ich die Lösung für die Problem des Kontrollkästchens nicht anklickbar, wenn Sie Aniketos Code verwenden, müssen Sie sicherstellen, dass in Ihrem Code der Spalte geben Sie den xtype: 'checkcolumn, das wird den Trick

1

Ich bin auch auf dieses Problem gestoßen und um es einen Schritt weiter zu machen, musste ich eine QuickInfo über das Kontrollkästchen anzeigen lassen. Hier ist die Lösung kam ich mit, dass die am wenigsten invasive auf dem bestehenden checkcolumn Widget ...

renderer: function (value, metaData, record) { 
    // Add a tooltip to the cell 
    metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"'; 

    if (record.get("someColumn") === "") { 
     metaData.tdClass += " " + this.disabledCls; 
    } 

    // Using the built in defaultRenderer of the checkcolumn 
    return this.defaultRenderer(value, metaData); 
} 
2

Mit extjs 5 zu sein scheint es einfacher ist, defaultRenderer in Renderer Methode für die Zielkontrollkästchen, um zurückzukehren und ‚‘ für die anderen.

Das Kontrollkästchen wird nicht selbst gerendert, aber alle Ereignisse (z. B. checkchange, itemclick usw.) bleiben erhalten. Wenn Sie sie auch nicht möchten, können Sie sie in preassmth-Ereignis deaktivieren, z. B.

+0

Dies sollte die richtige Antwort sein, da die akzeptierte zu Leistungsproblemen führen kann, da CheckColumns erstellt wird, die niemals zerstört werden, wodurch der Ext.ComponentManager und die DOM-Größe erhöht werden. – xaume

Verwandte Themen