PDA

View Full Version : Ext loads too much code



LesJ
6 Feb 2012, 6:11 AM
See the code fragment... the panel Header loads the Ext.draw.Component.

The draw.Component requires pretty much the entire draw package. It loads both engines: VML and SVG, and it doesn't event check if the engine is supported. This is a ton of code, see this open ticket (http://www.sencha.com/forum/showthread.php?130546-OPEN-EXTJSIV-1401-Ext.draw-loads-unsupported-engines).

I suggest adding conditional resource loading or even creating two header types: Vertical and Horizontal.


Ext.define('Ext.panel.Header', {
extend: 'Ext.container.Container',
uses: ['Ext.panel.Tool', 'Ext.draw.Component', 'Ext.util.CSS', 'Ext.layout.component.Body', 'Ext.Img'],

mitchellsimoens
6 Feb 2012, 7:04 AM
The issue is that the uses and requires need to be there before the class is created so you can't add to the uses array in the constructor.

LesJ
6 Feb 2012, 7:19 AM
The issue is that the uses and requires need to be there before the class is created so you can't add to the uses array in the constructor.

I'd consider adding a conditional resource loader... perhaps along the line of yepnope (http://yepnopejs.com/).

... but even code like this would be more efficient:


Ext.define('Ext.draw.Surface', {
...
requires: ['Ext.draw.CompositeSprite'],

// uses: ['Ext.draw.engine.Svg', 'Ext.draw.engine.Vml', 'Ext.draw.engine.SvgExporter',
'Ext.draw.engine.ImageExporter'],

uses: Ext.supports.Svg ? ['Ext.draw.engine.Svg', 'Ext.draw.engine.SvgExporter', 'Ext.draw.engine.ImageExporter'] : ['Ext.draw.engine.Vml'],

Most of the time the headers are horizontal, so the drawing package is not needed.