EXTJS Panel vs Container (v3)

Revision 3 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>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />

<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',
  dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: {
      xtype: 'button',
      text: 'Test'
    }
  }]
});
ready
Containers
Ext.create('Ext.container.Container', {
  renderTo: 'center_div',
  width: 600,
  height: 600,
  title: 'Create Report',
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  items: [{
    xtype: 'toolbar',
    items: {
      xtype: 'button',
      text: 'Test'
    }
  }, {
    xtype: 'container',
    flex: 1
  }]
});
ready

Revisions

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