如何在ExtJS 4中使用Ext.define？ [英] How to use Ext.define in ExtJS 4?

问题描述

我是ExtJS 4的新手，需要一些帮助才能理解 Ext.define 的作用。

I'm new to ExtJS 4 and need some help understanding how the Ext.define works, please.

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

In fact what I want to do is something similar to the portlets in the portal example, in my application I will need so many objects to add in my different tabs, so in order to organize my code and not have just one very big script, I want to define each component I need in a separate file and then call it in the main script when I need it (I will mainly use the examples so this is why I want to know how Ext.define works so I can adapt those examples and make them work the way I want).

我希望我很清楚。

请提前感谢您的帮助。

推荐答案

Ext.define（String className，Object data，Function createdFn）：Ext.Base

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你做一个模具，你可以在很多情况下使用。你可以定义width，height，id，css，所以后来你只需要调用该模具/类。在你的情况下，您可以为每个选项卡定义一个类，然后当您打开/创建该选项卡的功能时，您可以说：

so, with Ext.define you make a mold, witch you can use later in many cases. You can define width, height, id, css, so later you just call that mold/class. In your case you can define a class for every tab, and then when you make a function to open/create that tab you can say:

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

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

您可以将每个类放在您的单独的。 js文件，以后，在生产你将使一个class.js与所有类在一个最小的.js文件！

You can put every Class in your separate .js file, later, on production you will make a class.js with all classes in one minified .js file!

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

You can define a class and then say:

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

这篇关于如何在ExtJS 4中使用Ext.define？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！