Ext JS中的可重複性4

Question

我在我的項目中有很多可重用的代碼（一些GUI，網格等）。 Extjs 4是否提供了處理可重用代碼的功能？示例：Java具有可導入任何項目的庫的功能。

Answer 1

如果你知道它的核心，ExtJs提供了高度的可重用性。

這些不同的概念浮現在腦海中：

班制度

一個ExtJS的最強大的功能是，一切都被組織到一個類層次結構，所以本質上是設計理念是類似於JAVA或C++。

例如，考慮你的網格從不顯示標題。你可以這樣寫：

Ext.define('HeadlessGrid', { 
    extend: 'Ext.grid.Panel', 

    hideHeaders: true, 
}); 

所以HeadlessGrid繼承Ext.grid.Panel，只是修改其hideHeaders配置。您可以更改組件的許多其他配置，但也可以通過覆蓋其方法來改變其行爲。

有時，您不希望Ext類繼承，而是想要改變Ext類本身。

因此，像這樣：

Ext.override(Ext.grid.Panel, { 
    hideHeaders: true, 
}); 

意味着所有網格組件將不會顯示默認的標題。

命名空間

'庫'的概念可以使用名稱空間來實現。因此，與前面的例子來進行，你可能有：

Ext.define('Ext.Juice.HeadlessGrid', { 
    extend: 'Ext.grid.Panel', 

    hideHeaders: true, 
}); 

現在HeadlessGrid屬於Ext.Juice命名空間。

你可以設置你的類加載器，像這樣：

Ext.Loader.setPath('Ext.Juice', '../../libs/Juice');  

現在這個文件夾下的所有類都被你寫的任何應用程序重複使用。

插件

插件允許通過的組合物，而不是繼承來擴展（可見）的組成部分。所以加入這個插件的任何電網將隱藏標題：

Ext.define("Ext.plugin.Decapitator", { 
    extend : "Ext.AbstractPlugin", 
    alias : "plugin.decapitator", 

    init : function(aPanel) { 
     aPanel.hideHeaders = true; 
    }, 

}); 

混入

混入允許你混合在一起班，非常喜歡多重繼承。

以下代碼（來自文檔）將CanSing類與Musician類混合。

Ext.define('CanSing', { 
    sing: function() { 
     alert("I'm on the highway to hell...") 
    } 
}); 

Ext.define('Musician', { 
    mixins: ['CanSing'] 
}) 

Answer 2

這是......相同......將要重複使用的組件放入庫中，然後使用Ext.require()將其導入到項目中。

Answer 3

您可以使用Ext.define定義一個類，然後在Ext.create（或使用xtypes）的應用程序中重複使用它。

如果您需要在其他項目中使用相同的屏幕/類，您可以複製您定義類並使用它的文件。

例子：

//Defining Class 
Ext.define('Stack.Overflow', { 
    alias: 'widget.SO', 

    someProperty: 'something', 
    someMethod: function(s) { 
     alert(s + this.someProperty); 
    } 
}); 

//Creating class with Ext.create: 
var myClass = Ext.create('Stack.Overflow', { 
    extraProperty: 1337 
}); 

//Creating component inline: 
var panel = Ext.widget('panel', { // Equivalent to Ext.create('widget.panel') 
    title: 'Panel', 
    items: [{ 
     xtype: 'SO', 
     extraColor: '#BADA55' 
    },{ 
     xtype: 'SO', //reusable class 
     extraColor: '#FFFF00' 
    }] 
}); 

Answer 4

@Mchl，

你使用MVC結構或ExtJS的4.x的版本一般結構。 如果您使用MVC結構，您可以在應用程序文件夾內創建一個單獨的文件夾（已存在文件夾命名視圖，模型，控制器），例如。應用程序/組件。並創建類使用爲

Ext.define（'MyApp.component.componentName'，{.....}）;

請注意，您將不得不包含Ext.require（'MyApp.component.componentName'）來預加載代碼。