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):
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.
Ich musste Ext.ux.CheckColumn
erweitern, um zu verhindern, dass Ereignisse von deaktivierten Checkboxen abgefeuert werden.
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.
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(' ') + '"> </div>';
}
};
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
Ich habe es bearbeitet. Probieren Sie die Lösung aus. – Aniketos
+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