如何在 ExtJS 4 中使用 Ext.define？答案

【问题标题】：How to use Ext.define in ExtJS 4?如何在 ExtJS 4 中使用 Ext.define？
【发布时间】：2013-05-14 21:37:24
【问题描述】：

我是 ExtJS 4 的新手，需要一些帮助来了解 Ext.define 的工作原理。

事实上，我想做的是类似于门户示例中的 portlet，在我的应用程序中，我需要在我的不同选项卡中添加很多对象，所以为了组织我的代码而不是只有一个非常大脚本，我想在一个单独的文件中定义我需要的每个组件，然后在需要时在主脚本中调用它（我将主要使用示例，这就是为什么我想知道Ext.define 是如何工作的，所以我可以调整这些示例，让它们按照我想要的方式工作）。

我希望我是清楚的。

提前感谢您的帮助。

【问题讨论】：

标签： extjs portlet extjs4

【解决方案1】：

Ext.define (String className, Object data, Function createdFn) : Ext.Base

Ext.define is used to define a class. Example:

// creates My.computer.NoteBook Class
Ext.define('My.computer.NoteBook', {

     extend:'Ext.panel.Panel',

     config: {

          hardware:'Dell',
          os:'Linux',
          price:500
     },

     constructor:function(config) {

          this.initConfig(config);

          return this;
     }
});


// creates instance of My.computer.NoteBook Class
var myComputer = Ext.create('My.computer.NoteBook', {

     hardware:'MacBook Pro',
     os:'Mac OS X',
     price:1800
});

因此，您可以使用 Ext.define 制作模具，以后在许多情况下都可以使用。您可以定义宽度、高度、id、css，因此稍后您只需调用该模具/类。在您的情况下，您可以为每个选项卡定义一个类，然后当您创建一个打开/创建该选项卡的函数时，您可以说：

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

    mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show();   
}
...

您可以将每个类放在单独的 .js 文件中，稍后，在生产中，您将在一个缩小的 .js 文件中创建一个包含所有类的 class.js！

你可以定义一个类，然后说：

items: Ext.create("My.computer.NoteBook",{
        ...
})

【讨论】：

非常感谢，我确实了解第一部分，虽然没有真正理解第二部分，但我可以使用var panel1 = Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});，然后在我的标签中调用它，就像items : [panel1 ]。我已经设法做到这一点并定义了一个面板和简单的网格，**我的问题是**在其中声明变量和函数，就像在 grid filtering example 中一样，我如何使用 ext.define 在单独的脚本中做同样的事情？
你在类中定义你的视图，它的所有方法和属性，然后在 items: 中创建一个实例。你必须在某个地方创建一个实例。
谢谢，我可以毫无问题地调用它，但定义它是问题.. 我出错了，你能看看我的另一个post
你的构造函数不应该调用它的父级吗？像这样：this.__proto__.superclass.constructor.call(this, cfg);
@KenV.H.，在 Extjs3 中，是的，它应该。 ;-)

【解决方案2】：

Ext JS 4 有一种新的扩展方式...称为 Ext.define，它将我们在 Ext JS 3 和之前必须做的 Ext.extend、Ext.reg 和 Ext.ns 合并到一个方法调用中。 ..

Ext.define('com.sencha.MyPanel', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.mypanel',
    ...
    ...
});

Ext.define 有两个参数，第一个是完整的类名（将作为 Ext.ns 创建路径并创建对象）和配置。在配置中，您可以使用扩展配置指定要扩展的类。您使用别名配置设置 XType。别名配置有点不同，因为它有两部分……第一部分是类型（在这种情况下是小部件），然后是 XType（mypanel）。

【讨论】：