グリッド列を表示/非表示にすると、ext-all.jsが応答しない

Question

グリッド列を表示/非表示にしようとしたときにext-all.jsファイルがハングする問題に遷移しました。

Mozilla Firefox 25.0でextjs 4.1.2を使用しています。OSはUbuntu 12.10、まさに明確にしています。

プラグインを介してユーザが行を編集すると、隠しフィールドはユーザがそれらを編集できるように表示されるようになる。編集が完了したら、それらの列が再び隠れて隠されます。

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

.

コードが意図したとおりに機能している間、それは私のブラウザを中程度の時間だけ促す前に、スクリプトがビジーである/無応答（Script: http://localhost/lib/ext-4.1.2/ext-all.js:18）

この問題が私のextjs、私のコード、または私のブラウザのバージョンにあるかどうかに関して不確実です。誰かがそれを助けることができるならば、それほど高く評価されるでしょう。

Answer 1

hide and showは、DOMと後続のブラウザのリフローを操作することを伴うため、高価な操作になる可能性があります。2つの行のためにそれはかなりの遅れを生み出さないが、行の数が増えるにつれてあなたは減速を経験することができる。

私はおそらく、編集のためのすべてのフィールドを含む形式で別のEXTウィンドウを開くこと、グリッドの all 行の列を表示して非表示にしないようにすることを検討します。