ExtJs show/hide - add/removeCls (v8)

Revision 8 of this benchmark created on

Preparation HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>

<style type='text/css' rel='stylesheet'>
  .hidden-display { display: none; } .hidden-visible { visibility: hidden; }
</style>

Setup

Ext.onReady(function() {
      Ext.viewport = Ext.create('Ext.container.Viewport', {
        layout: {
          type: 'border'
        },
        items: [{
          xtype: 'container',
          hideMode: 'visibility',
          region: 'center',
          itemId: 'myContainer',
          items: [{
            xtype: 'container',
            itemId: 'hide-display'
          }, {
            xtype: 'container',
            itemId: 'hide-visibility',
            hideMode: 'visibility'
          }, {
            xtype: 'container',
            itemId: 'hide-offsets',
            hideMode: 'offsets'
          }]
        }]
      });
    
      Ext.create('Ext.window.Window', {
        itemId: 'window-display'
      });
      Ext.create('Ext.window.Window', {
        itemId: 'window-destroy',
        hideMode: 'destroy'
      });
    });

Test runner

Ready to run.

Testing in
TestOps/sec
show/hide
Ext.ComponentQuery.query('#myContainer')[0].hide();
Ext.ComponentQuery.query('#myContainer')[0].show();
ready
add cls display none
Ext.ComponentQuery.query('#myContainer')[0].addCls('hidden-display');
Ext.ComponentQuery.query('#myContainer')[0].removeCls('hidden-display');
ready
add cls display visible
Ext.ComponentQuery.query('#myContainer')[0].addCls('hidden-visible');
Ext.ComponentQuery.query('#myContainer')[0].removeCls('hidden-visible');
ready
show/hide element
Ext.ComponentQuery.query('#myContainer')[0].el.hide();
Ext.ComponentQuery.query('#myContainer')[0].el.show();
ready
addCls/removeCls element
Ext.ComponentQuery.query('#myContainer')[0].el.addCls('hidden-display');
Ext.ComponentQuery.query('#myContainer')[0].el.removeCls('hidden-display');
ready
hideMode display
Ext.ComponentQuery.query('#hide-display')[0].hide();
Ext.ComponentQuery.query('#hide-display')[0].show();
ready
hideMode visibility
Ext.ComponentQuery.query('#hide-visibility')[0].hide();
Ext.ComponentQuery.query('#hide-visibility')[0].show();
ready
hideMode offsets
Ext.ComponentQuery.query('#hide-offsets')[0].hide();
Ext.ComponentQuery.query('#hide-offsets')[0].show();
ready
element style
Ext.ComponentQuery.query('#myContainer')[0].el.setStyle('display', 'none');
ready
element dom style
Ext.ComponentQuery.query('#myContainer')[0].el.dom.style.display = 'none';
ready
Test 11
Ext.ComponentQuery.query('#myContainer')[0].setVisible(true);
Ext.ComponentQuery.query('#myContainer')[0].setVisible(false);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.