Ext-all.js no responde cuando se muestra / oculta columnas de cuadrícula

Question

Me encontré con un problema en el que se cuelga el archivo ext-all.js al intentar mostrar / ocultar columnas de cuadrícula.

Estoy usando extjs 4.1.2 en Mozilla Firefox 25.0.OS es Ubuntu 12.10, solo para aclarar.

Cuando el usuario edita una fila a través del complemento, los campos ocultos se muestran solo para que el usuario pueda editarlos.Después de completar la edición, esas columnas se ocultan de nuevo.

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

Mientras mi código funciona según lo previsto, hace que mi navegador se bloquee para una cantidad de tiempo moderada antes de que me solicite un mensaje informando sobre un script que está ocupado / no responde (Script: http://localhost/lib/ext-4.1.2/ext-all.js:18)

No estoy seguro de si este problema se encuentra con mi versión de EXTJS, mi código o mi navegador.Si alguien pudiera ayudarlo, sería muy apreciado.

Answer 1

Ocultar y mostrar pueden ser operaciones costosas, ya que implican manipular DOM y las redes posteriores del navegador.Para un par de filas no crea un retraso considerable, pero a medida que crece varias filas, puede experimentar desaceleraciones.

Probablemente lo consideraría abrir una ventana externa separada con un formulario que contiene todos los campos para editar, no mostrar y ocultar columnas de todas filas de la cuadrícula.