Question

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

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

我希望我很清楚。

并提前感谢您的帮助。

Answer 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();   
}
...

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

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

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

Answer 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来创建路径并将创建对象）和配置。在配置中，您可以使用extend config指定要扩展的类。您使用别名配置设置XType。别名配置有点不同，因为它有两个部分......第一部分是类型（本例中是小部件），然后是XType（mypanel）。

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

2 个答案: