Extjs 4組件創建的語法在性能方面更好

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

我更喜歡後一種語法，因爲它更易於閱讀。使用此語法是否有任何性能損失？

在此先感謝。 Vikas

Answer 1

最大的區別是，該配置方式是懶惰。懶惰的意思是，直到你使用組件代碼將不會被執行，分析或甚至呈現。

的最好方法是（恕我直言）

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

Answer 2

我不確定你的意思是新的語法，如果你的加載對象動態.add（）屬性是要走的路（portlets，加載項目：[]從JSON狀態，如持久性選項卡，像自定義工具欄項目的前景）。但對於黑客合理的東西出來我做到這一點...

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

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