Extjs中的可重用性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']
})

Answer 2

@Mchl，

您使用的是MVC结构还是extjs 4.x版的一般结构。 如果您正在使用MVC结构，则可以在app文件夹中创建一个单独的文件夹（已存在名为view，model，controller 的文件夹），例如。 app / component。并使用

创建类

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

请注意，您必须包含Ext.require（'MyApp.component.componentName'）才能预加载代码。

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

它......同样......将要重用的组件放在库中，然后使用Ext.require()将其导入项目。