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

Question

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

实际上，我想做的事情与门户网站示例中的portlet类似，在我的应用程序中，我需要在不同的选项卡中添加这么多的对象，因此，为了组织我的代码而不仅仅是一个非常大的脚本，我想在一个单独的文件中定义所需的每个组件，然后在需要时在主脚本中调用它(我将主要使用示例，因此这就是为什么我想知道Ext.define的工作原理，以便我可以改编这些示例并制作他们按照我想要的方式工作)。

我希望我很清楚。

在此先感谢您的帮助。

Answer 1

Ext.define(字符串className，对象数据，函数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",{
        ...
})