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;
    },

});

混入

Mixins允许您将类混合在一起,非常类似于多重继承.

以下代码(来自文档)将CanSing类与Musician类混合.

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

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