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

Question

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

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

Надеюсь, я был чист.

И заранее благодарю за помощь.

Answer 1

Ext.define (String className, Данные объекта, Функция creatFn): 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",{
        ...
})

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