Как использовать Ext.define в ExtJS 4?

Я новичок в ExtJS 4 и вам нужна помощь в понимании того, как работает Ext.define.

На самом деле то, что я хочу сделать, это нечто похожее на портлеты в примере портала, в моем приложении мне нужно так много объектов, чтобы добавить мои разные вкладки, чтобы упорядочить мой код и не иметь только одного big script, я хочу определить каждый компонент, который мне нужен в отдельном файле, а затем вызвать его в главном script, когда он мне понадобится (в основном я буду использовать примеры, поэтому я хочу знать, как Ext.define работает, поэтому я могу адаптировать эти примеры и заставить их работать так, как я хочу).

Ответы

Ответ 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();   
}
...

Вы можете поместить каждый класс в ваш отдельный .js файл, позже, при производстве, вы сделаете class.js со всеми классами в одном мини файле .js!

Вы можете определить класс, а затем сказать:

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

Ответ 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 для создания пути и создаст объект) и конфигурацию. В конфигурации вы указываете, какой класс вы расширяете, используя расширенный config. Вы настроили XType, используя конфигурацию псевдонимов. Конфигурация псевдонимов немного отличается, поскольку у нее две части... первая часть - это тип (виджет в этом случае), а затем XType (mypanel).