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

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

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

Надеюсь, я был понятен.

И заранее спасибо за вашу помощь.


extjs portlet extjs4
person Armance    schedule 09.06.2011    source источник

Ответы (2)


arrow_upward
24
arrow_downward

Ext.define (строка className, данные объекта, функция 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 вы создаете форму, которую во многих случаях можно использовать позже. Вы можете определить ширину, высоту, идентификатор, 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",{
        ...
})
person Davor Zubak    schedule 09.06.2011
comment
Большое спасибо, я понял первую часть, но не понял вторую, но я могу использовать var panel1 = Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});, а затем называть это на своей вкладке items : [panel1 ]. мне уже удалось это сделать и определить панель и простую сетку, **моя проблема заключается в **объявлении переменных и функций внутри нее, как в пример фильтрации сетки как я могу сделать то же самое в отдельном скрипте с ext.define? - person Armance; 09.06.2011
comment
Вы определяете свое представление, все его методы и свойства в классе, а затем просто создаете экземпляр в items:. Вы должны где-то создать экземпляр. - person Davor Zubak; 09.06.2011
comment
спасибо, я могу назвать это без проблем, но определить это проблема.. я получаю ошибки, не могли бы вы взглянуть на мой другой пост - person Armance; 09.06.2011
comment
Разве ваш конструктор не должен вызывать своего родителя? Вот так: this.__proto__.superclass.constructor.call(this, cfg); - person Byte Welder; 29.02.2012
comment
@KenV.H., в Extjs3 да, должно. ;-) - person Davor Zubak; 29.02.2012

arrow_upward
14
arrow_downward

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

person Kunal    schedule 23.06.2011