EXTJS Panel vs Container (v4)

Revision 4 of this benchmark created on

Description

EXTJS Panel vs Container

Preparation HTML

<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/extjs-4.1.0/ext-all.js"></script>
<div id="replaceme">Some <span style="color:red;">random text</span></div>
<div id="center_div">
</div>

Teardown


    document.getElementById('center_div').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Panels
Ext.create('Ext.panel.Panel', {
      renderTo: 'center_div',
  width: 600,
  height: 600,
  title: 'Create Report',
  layout: 'fit',
  items: [{
    title: 'Vbox Panel',
    xtype: 'panel',
    layout: {
      type: 'vbox',
      align: 'stretch'
    },
    items: [{
      title: 'Panel 1',
      xtype: 'panel',
      border: false,
      height: 100,
      layout: 'fit',
      items: [{
        //title: 'Combo Panel',
        xtype: 'panel', // combo box panel, no title
        html: 'This is combo box panel'
      }]
    }, {
      title: 'Panel 2',
      xtype: 'panel',
      border: false,
      layout: 'fit',
      flex: 1,
      items: [{
        xtype: 'panel', // options panel, no title
        html: 'This is options panel',
        style: {
          paddingTop: '10'
        }
      }]
    }]
  }]
});
ready
Containers
Ext.create('Ext.container.Container', {
    renderTo: 'center_div',
  width: 600,
  height: 600,
  title: 'Create Report',
  layout: 'fit',
  items: [{
    title: 'Vbox Panel',
    xtype: 'container',
    layout: {
      type: 'vbox',
      align: 'stretch'
    },
    items: [{
      title: 'Panel 1',
      xtype: 'container',
      border: false,
      height: 100,
      layout: 'fit',
      items: [{
        //title: 'Combo Panel',
        xtype: 'panel', // combo box panel, no title
        html: 'This is combo box panel'
      }]
    }, {
      title: 'Panel 2',
      xtype: 'container',
      border: false,
      layout: 'fit',
      flex: 1,
      items: [{
        xtype: 'container', // options panel, no title
        html: 'This is options panel',
        style: {
          paddingTop: '10'
        }
      }]
    }]
  }]
});
ready

Revisions

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