J'ai une colonne de J'aimerais noter que je ne cherche pas une case à cocher pour sélectionner des lignes. CheckColumn pour activer les valeurs booléennes. Je voudrais pouvoir basculer toutes les lignes pour cette valeur à la fois. Idéalement, je pourrais ajouter une case à cocher à l'en-tête CheckColumn et écouter les modifications. Est-ce possible?
5 Réponses :
J'ai créé une version mise à jour de l'ext.ux.CheckColumn pour cela, il suffit d'inclure ce code une fois que le code extjs est inclus: puis un exemple de configuration d'une colonne de case à cocher Soyez comme ceci: P> {
xtype: "checkcolumn",
columnHeaderCheckbox: true,//this setting is necessary for what you want
store: (you need to put the grids store here),
sortable: false,
hideable: false,
menuDisabled: true,
dataIndex: "value_flag",
listeners: {
checkchange: function(column, rowIndex, checked){
//code for whatever on checkchange here
}
}
}
Oh, assurez-vous de jeter l'ancien CheckColumn de votre inclusion sur la page :)
Le seul problème avec ceci est que 'CheckChange' n'est pas tiré lorsque vous cliquez sur la case dans l'en-tête. Y a-t-il une solution pour ça? Sinon, c'est exactement ce dont j'avais besoin, merci !!
Je suppose que vous voulez que cela déclenche pour toutes les cases à cocher qui changent lorsque l'état de l'en-tête est changé alors? Je peux faire une mise à jour à ma version de ceci, si je le fais, je vous en informerai des modifications. Cela peut avoir une incidence négative sur mon code quelque part.
Est-ce valide pour extjs 4.2.x? Je vais essayer moi-même et mettre à jour ici à moins que quelqu'un connaisse déjà la réponse ...
Je crois que cela ne fonctionne pas avec EXTJS 4.2 en raison de la restructuration du composant de la grille.
J'ai créé un correctif basé sur le code fourni par @reimius. Il appelle uniquement la méthode GetStoreISAllChecked lorsque nécessaire pour améliorer un peu la performance. Il prend également en charge ExtJS 4.2 J'espère que c'est utile.
Bon travail, mon ami! C'est vraiment, m'a vraiment sauvé, merci beaucoup!
Je dois utiliser CheckColumn événement. Comment puis-je faire ici?
L'utilisation de l'approche de Bocong ci-dessus n'a pas fonctionné pour moi hors de la boîte: la case à cocher en-tête s'affichait non cochée et n'a pas changé son état en cliquant (il semblait aussi un peu funky, a été coupé un peu sur le côté gauche).
J'ai modifié (et simplifié grandement) le code de Bocong ci-dessus pour l'obtenir pour bien fonctionner pour EXTJS 4.2.1 (Copie du balisage nécessaire à la case à la case d'une ligne régulière): P>
getHeaderCheckboxImage: function (allChecked) {
return '<img class="x4-grid-checkcolumn ' + ( allChecked ? 'x4-grid-checkcolumn-checked' : '' ) + '">';
}
Vous devez utiliser ce paramètre si vous utilisez ExtJS 6.5.2 ou plus.
{
xtype: 'checkcolumn',
headerCheckbox: true, // THIS OPETION SHOW YOU CHECKBOX ON HEADER.
sortable: false, // THIS OPTION DISABLE SORTING.
hideable: false, // THIS OPTION EXCLUDE COLUMN FORM MENU.
menuDisabled: true, //THIS OPTION HIDE MENU ON THE HEADER.
dataIndex: 'isChecked',
width: 25
}
faire ** ** ** ** * / p> Pour plus de détails, reportez-moi: < p> http: // docs. sencha.com/extjs/5.1.0/api/ext.Selection.Checkboxmodel.html#cfg-showheaderCheckbox