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

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.extend,Ext.reg和Ext.ns,我们必须在Ext JS 3和之前进入一个方法调用...

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

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