开发者

Extjs 4 Which syntax for component creation is better in terms of performance

开发者 https://www.devze.com 2023-03-17 14:26 出处:网络
I am trying to create a viewport and adding a panel to it. Which syntax do you think is better and why.

I am trying to create a viewport and adding a panel to it. Which syntax do you think is better and why.

Traditional syntax.

Ext.create('Ext.container.Viewport', {
    Layout: 'fit',
    renderTo: 'main',
    items: [{
        Ext.create('Ext.pane开发者_如何转开发l.Panel'))
    }]
});

new syntax.

var viewPort = Ext.create('Ext.container.Viewport');
viewPort.Layout = 'fit';
viewPort.renderTo = 'main';

var myPanel= Ext.create('Ext.panel.Panel');

//Add myPanelto the viewport
viewPort.add(myPanel);

I prefer the latter syntax just because it is easier to read. Is there any performance loss by using this syntax.

Thanks in advance. Vikas


The big difference is, that the config way is lazy. Lazy means, that until you use the component the code won't be executed, analyzed or even rendered.

The best way is (imho)

// hack example
Ext.create('Ext.Viewport', {
  layout: 'fit',
  items: [ {
    xtype : 'panel',
    ...
  } ],
  ...
});

// real world example
Ext.define('MyViewport', {
  extend : 'Ext.Viewport',
  layout: 'fit',
  items: [ {
    xtype : 'panel',
    ...
  } ],
  ...
});
myviewport = Ext.create('MyViewport');

However, it is more comfortable to use something likes this to archive more flexibility and reusability.

Ext.define('MyViewport', {
  extend : 'Ext.Viewport',
  layout: 'fit',
  initComponent : function(){
    this.items = this.buildItems();
    this.callParent();
  },
  buildItems: function() {
    return [ {
      xtype : 'panel',
      ...
    } ];
  },
  ...
});
myviewport = Ext.create('MyViewport');


I am not sure what you mean by the new syntax, if your loading object dynamically the .add() property is the way to go (portlets, loading items:[] from json from state such as persistent tabs, outlook like custom toolbar items). But for hacking something reasonable out I do this ...

var myPanel = new Ext.create('Ext.Panel', { .. });

Ext.create('Ext.Viewport', {
    layout: 'fit',
    items: [ myPanel ],
    ...
});
0

精彩评论

暂无评论...
验证码 换一张
取 消