1

我的项目中有很多可重用的代码（一些 GUI、网格等）。Extjs 4 是否提供任何处理可重用代码的功能？示例：Java 具有可导入任何项目的库的功能。

4

4 回答 4

7

如果您非常了解 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']
})
于 2013-03-01T14:07:20.693 回答
4

@Mchl，

你使用的是MVC结构还是extjs 4.x版本的通用结构。如果您使用的是 MVC 结构，您可以在 app 文件夹中创建一个单独的文件夹（已经存在名为 view、model、controller的文件夹），例如。应用程序/组件。并使用 as 创建类

Ext.define('MyApp.component.componentName', {.....});

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

于 2013-03-01T12:07:00.907 回答
3

您可以使用（或使用 xtypes）定义一个类Ext.define并在整个应用程序中重用它。Ext.create

如果您在其他项目中需要相同的屏幕/类，您可以复制定义类的文件并使用它。

例子：

//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'
    }]
});
于 2013-03-01T10:57:07.617 回答
0

是……一样的……把你想重用的组件放在一个库中，然后Ext.require()用来导入到你的项目中。

于 2013-03-01T09:31:29.767 回答