Colonne de contrôle Extjs désactivée pour certaines lignes, basée sur la valeur

je cherchais une solution à cette question et je suis tombé sur cette question, mais aucune solution pratique nulle part pour montrer une case à cocher désactivée au lieu de aucune case à cocher comme couvert dans l'autre réponse. C'était en cause, mais voici ce que j'ai fait (pour 4.1.0):

1. j'ai trouvé que l' extjs\exemples\ux\css\CheckHeader.css fichier est utilisé par Ext.ux.CheckColumn n'a pas de classe handicapée, donc je j'ai dû le modifier pour qu'il ressemble plus au style de la boîte à cocher standard. contenir ext-all.css (qui comprend une case à cocher désactivée classe.)

2. j'ai dû prolonger Ext.ux.CheckColumn pour éviter que des événements ne se produisent tiré des cases à cocher désactivées.

3. finalement, j'ai dû fournir mon propre locataire pour appliquer les classe selon ma logique.

le code est le suivant.

CheckHeader Modifié.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;
}

arrière-plan-url de l'image ci-dessus les points de cette image qui est normalement livré avec extjs 4.1.0: extjs\resources\themes\images\default\form\checbox.gif.

L'étendue Ext.ux.La classe CheckColumn pour que les événements ne soient pas lancés à partir de checkcolumns désactivés:

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

});

implémentation avec le renderer personnalisé pour appliquer la classe désactivée selon ma propre logique:

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

    }
};

en utilisant extjs 5, il est plus facile de retourner defaultRenderer dans la méthode renderer pour les cases à cocher target et " pour les autres.

renderer: function (value, metaData, record) {
    return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);
}

un tel ne rendra pas la case à cocher elle-même mais tous les événements (par ex. checkchange, itemclick, etc) seront conservés. Si vous ne les voulez pas non plus, vous pouvez les désactiver dans l'événement beforesmth, par exemple

onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) {
    var row = me.getView().getRow(rowIndex),
        record = me.getView().getRecord(row);
    return !record.isLeaf();
},

j'ai trouvé la solution au problème de la case à cocher non cliquable quand usign aniketos code, vous devez vous assurer que dans votre code de la colonne vous spécifiez le xtype: 'checkcolumn, qui fera l'affaire

j'ai aussi rencontré ce problème et pour aller plus loin, j'ai besoin d'une info-bulle montrer sur la case à cocher. Voici la solution que j'ai trouvé qui semble être la moins invasive sur l'existant 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);
}