Ext-all.js non risponde quando si mostra / nascondono le colonne della griglia

Question

Ho corso in un problema in cui il file ext-all.js si blocca quando si tenta di mostrare / nascondere le colonne della griglia.

Sto usando Extjs 4.1.2 su Mozilla Firefox 25.0.OS è Ubuntu 12.10, solo per chiarire.

Quando l'utente modifica una riga tramite il plug-in, i campi nascosti vengono visualizzati solo in modo che l'utente possa modificarli.Dopo che il montaggio è completare quelle colonne che diventano nuovamente nascoste.

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

.

mygrid.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);
    }
});

.

Mentre il mio codice funziona come previsto, fa sì che il mio browser si bloccasse per una quantità moderata di tempo prima di approfondermi con un messaggio che informa su uno script essendo occupato / non rispondente (Script: http://localhost/lib/ext-4.1.2/ext-all.js:18)

Sono incerto sul fatto che questo problema sia con la mia versione di Extjs, il mio codice o il mio browser.Se qualcuno potrebbe aiutare sarebbe molto apprezzato.

Answer 1

Nascondi e mostra può essere operazioni costose in quanto comportano la manipolazione del DOM e il successivo riflesso del browser.Per un paio di righe non creano un ritardo considerevole, ma come un numero di righe cresce, puoi sperimentare rallentamenti.

Probabilmente considererei di aprire una finestra EXT separato con un modulo contenente tutti i campi per la modifica, non mostrando e nascondendo colonne di tutte righe della griglia.