Extjs 4 Какой синтаксис для создания компонента лучше с точки зрения производительности - PullRequest
Новая
       3

Extjs 4 Какой синтаксис для создания компонента лучше с точки зрения производительности

0 голосов
/ 06 июля 2011

Я пытаюсь создать область просмотра и добавить к ней панель. Какой синтаксис, по вашему мнению, лучше и почему.

Традиционный синтаксис. 

Ext.create('Ext.container.Viewport', {
    Layout: 'fit',
    renderTo: 'main',
    items: [{
        Ext.create('Ext.panel.Panel'))
    }]
});

новый синтаксис. 

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);

Я предпочитаю последний синтаксис только потому, что его легче читать. Есть ли потеря производительности при использовании этого синтаксиса.

Заранее спасибо. Викас

Ответы [ 2 ]

2 голосов
/ 29 сентября 2012

Большая разница в том, что config ленив. Ленивый означает, что пока вы не используете компонент, код не будет выполняться, анализироваться или даже отображаться.

Лучший способ (имхо) 

// 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');

Однако удобнее использовать что-то подобное для архивирования большей гибкости и возможности повторного использования. 

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');
2 голосов
/ 07 июля 2011

Я не уверен, что вы подразумеваете под новым синтаксисом, если ваш объект загрузки динамически, свойство .add () - это путь (портлеты, загрузка элементов: [] из json из состояния, такого как постоянные вкладки, внешний вид пользовательские элементы панели инструментов). Но для взлома чего-то разумного я делаю это ... 

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

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