如何在 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.define
有效,因此我可以调整这些示例并使它们按我想要的方式工作).
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 可以制作模具,以后可以在许多情况下使用.您可以定义宽度、高度、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 文件中,稍后,在生产中,您将在一个缩小的 .js 文件中创建一个包含所有类的 class.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!
你可以定义一个类然后说:
You can define a class and then say:
items: Ext.create("My.computer.NoteBook",{
...
})
这篇关于如何在 ExtJS 4 中使用 Ext.define?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!