Comment ExtJS4 génère automatiquement checkbox_extjs qui contrôle l'affichage et le masquage des colonnes de la grille

Pour une raison quelconque, je dois créer un groupe de cases à cocher qui contrôle l'affichage des colonnes de la grille. Bien que le panneau de grille dans EXTJS4 soit livré avec une liste qui peut contrôler l'affichage et le masquage des colonnes, il existe une telle demande (elle doit être claire à un moment donné). coup d'œil)

L'image suivante est présentée ci-dessous



Suite au travail effectué il y a quelques jours, j'ai complété les champs personnalisés ce matin. L'idée est de. obtenez les champs et les colonnes de la colonne une fois la requête ordinaire ou la requête avancée ci-dessus terminée. Attendez les informations, puis transmettez-les à une fonction de traitement makeCustomMadePanel. Cette fonction est utilisée pour générer le groupe de cases à cocher. Lors de sa génération, ajoutez un. Au départ, je pensais que la case à cocher aurait un événement similaire à vérifier. Cependant, après avoir examiné l'API, il semble qu'il n'y ait qu'un événement de changement, MD. .

Publiez la fonction makeCustomMadePanel que j'ai écrite ci-dessous. . Utilisé pour générer automatiquement un groupe de cases à cocher basé sur les colonnes de la grille (le contenu de l'en-tête et d'autres informations de la grille entière sont obtenus à partir de l'arrière-plan. Quelle que soit la table envoyée depuis l'arrière-plan, un groupe de cases à cocher peut être généré pour contrôler le masquage et affichage des colonnes)

paramètres Ce sont des champs et des colonnes utilisés par gridpanel lors de la reconfiguration. La clé est var t=grid_a.columnManager.headerCt.items.get(th.itemId); . Cette phrase est utilisée pour obtenir les informations de colonne de grid_a. . Il semble qu'il soit introuvable dans l'API. J'ai trouvé plusieurs méthodes en ligne mais aucune ne convenait. Je ne veux pas donner d'identifiant à chaque colonne. Cela a été trouvé sur stackoverflow.com/. . http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

Copiez le code Le code est le suivant :

function makeCustomMadePanel(fields,cl)
{

var x=cusMadePanel.getComponent ('custom' );
//console.log(cusMadePanel.getComponent('custom'));
for(var i=0;i{
x.add(
{
xtype : 'checkboxfield',
boxLabel : cl[i].header,
inputValue : champs[i].name,
checked:true,
itemId:i ,
name : 'custom',
auditeurs : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt .items.get (th.itemId);
if(t.isVisible()){

t.setVisible(false);
else{
t.setVisible); (vrai);
}
//grid_a.columns[3].setVisible(false);
}}

}
);


Après avoir donné customMadePanel

copiez le code Le code est le suivant : Ext.define ('customMadePanel', {

extend : 'Ext.form.Panel',

title : 'champ personnalisé',
collapsible : true,
items : [ {
itemId:'custom',

xtype : 'checkboxgroup',

fieldLabel : 'Sélectionner le champ',
colonnes : 6,
items : []


}]
//collapsed:true,
});
var cusMadePanel=new customMadePanel();


Les lacunes de mon approche sont également évident, dans la fonction makeCustomMadePanel La boucle pour générer le composant case à cocher prend trop de temps, et cela prend plusieurs secondes pour 38 composants. . L'expérience utilisateur n'est certainement pas bonne. .

Et actuellement, il est généré en fonction des résultats de la requête après chaque requête. . . Je vais réfléchir à nouveau à une bonne solution


Aujourd'hui, j'ai optimisé makeCustomMadePanel, et la vitesse de génération des composants a été considérablement améliorée par rapport à avant !

Copier le code Le code est le suivant : function makeCustomMadePanel(fields,cl)

cusMade=1;
var x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom')); ;
for(var i=0;i{
//x.add(
var temp=
{
xtype : 'checkboxfield' ,
boxLabel : cl[i].header,
//inputValue : champs[i].name,
checked:true,
itemId:i,
name : 'custom',
auditeurs : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt.items.get(th.itemId
/) /console.log(t.isVisible());
//console.log('break');
if(t.isVisible()){

t.setVisible(false) ;
}
else{
t.setVisible(true);
}
//console.log(t.isVisible()); columnManager.headerCt .items.get(th.itemId);
//console.log(t1);
//grid_a.columns[3].setVisible(false);
};
//console.log(temp);
fie.push(temp);
//console.log(fie); fie);


L'idée est d'assembler d'abord les objets composants qui doivent être générés en boucle, puis de les ajouter une fois. Le coût de chaque ajout est très élevé et la vitesse est vraiment. beaucoup amélioré ~