Question

我正在尝试创建一个视口并向其添加一个面板。你认为哪种语法更好，为什么。

传统语法。

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

我更喜欢后一种语法，因为它更容易阅读。使用此语法是否有任何性能损失。

提前致谢。维卡斯

Answer 1

我不确定你的新语法是什么意思，如果你的加载对象动态地.add（）属性是要去的方式（portlets，从json加载项目：[]来自状态，如持久性标签，outlook like自定义工具栏项）。但是对于黑客攻击的事情，我这样做......

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

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

Answer 2

最大的区别是，配置方式是懒惰的。懒惰意味着，在您使用组件之前，代码将不会被执行，分析甚至呈现。

最好的方法是（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');

但是，使用这样的东西来存档更多的灵活性和可重用性会更加舒适。

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

Extjs 4在性能方面，组件创建的语法更好

2 个答案: