Ext-all.js ne répond pas lors de l'affichage/masquage des colonnes de la grille

Question

J'ai rencontré un problème dans lequel le fichier ext-all.js se bloque lorsque je tente d'afficher/masquer les colonnes de la grille.

J'utilise Extjs 4.1.2 sur Mozilla Firefox 25.0.Le système d'exploitation est Ubuntu 12.10, juste pour clarifier.

Lorsque l'utilisateur modifie une ligne via le plugin, les champs masqués s'affichent uniquement pour que l'utilisateur puisse les modifier.Une fois la modification terminée, ces colonnes redeviennent masquées.

Contrôleur.js :

var hiddenColumns = []; //global array for storing columns

init: function() {
    this.control({
    ...
'myGrid': {
    beforeedit: function() {
        me.columnsVisibility('show');
    },
    afterrender: function(){
        var me      = this,
        formDataPanel   = me.getFormDataPanel(),
        activeGrid      = formDataPanel.getLayout().getActiveItem();

        for (i=0; i < activeGrid.columns.length; i++) {
        if (activeGrid.columns[i].hidden) {
            Ext.Array.push(hiddenColumns, activeGrid.columns[i]);
        }
        }
    },
            edit: function(editor, e) {
        var me      = this,
        usersStore      = me.getStore('Users'),
        alias           = me.getUserAlias(),
        record          = usersStore.findRecord('email', alias, false, true, true),
        fdupdate        = record.get('fdupdate');

        me.columnsVisibility('hide');
        if (fdupdate == 't') {
        try {
            e.store.sync();
        }
        catch (e) { }
        e.record.commit();
        } else {
        var store = me.getStore('Inspection');
        store.rejectChanges();
        Ext.Msg.alert('Alert!','This function is not currently available for you');
        }

            },
            ...
    }
   });

},
...
columnsVisibility: function(visible){
for (var i=0; i < hiddenColumns.length; i++) {
    if (visible == 'hide') {
    hiddenColumns[i].hide();
    } else if (visible == 'show') {
    hiddenColumns[i].show();
    }
}
},
...

maGrille.js :

   initComponent: function() {
        var filters = {
        ftype: 'filters',
        // encode and local configuration options defined previously for easier reuse
        encode: false, // json encode the filter query
        local: true
    },
Ext.apply(this, {
            title: 'Inspection',
            id: 'inspection', // This is required since title can be changed by filter functions to update status of the grid.
        store: 'Inspection',
        features: [filters],
        selModel: Ext.create('Ext.selection.CheckboxModel', { checkOnly: true }),
            plugins: [
                Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 2
                })
            ],
        columns: [{
        text: 'ID',
        width: 35,
        dataIndex: 'id'
        },{
        text: 'Record Name',
        dataIndex: 'record_name',
        width: 70,//flex: 1,
        hidden: true,
        editor: {
            queryMode: 'local',
            displayField: 'record_name',
            valueField: 'record_name',
            editable: false
        },
        filter: {
            type: 'string'      
        }
        },{
        text: 'Date Created',
        dataIndex: 'date_created',
        width: 150,
        filter: {
            type: 'string'      
        }
        }]
    });
this.callParent(arguments);
    }
});

Bien que mon code fonctionne comme prévu, mon navigateur se bloque pendant un laps de temps modéré avant de m'inviter à envoyer un message informant qu'un script est occupé/ne répond pas (Script: http://localhost/lib/ext-4.1.2/ext-all.js:18)

Je ne sais pas si ce problème vient de ma version d'extjs, de mon code ou de mon navigateur.Si quelqu'un pouvait aider, ce serait très apprécié.

Answer 1

Masquer et afficher peuvent être des opérations coûteuses car elles impliquent la manipulation du DOM et les redistributions ultérieures du navigateur.Pour quelques lignes, cela ne crée pas de retard considérable, mais à mesure que le nombre de lignes augmente, vous pouvez rencontrer des ralentissements.

J'envisagerais probablement d'ouvrir une fenêtre Ext séparée avec un formulaire contenant tous les champs à modifier, sans afficher ni masquer les colonnes de tous lignes de la grille.