Ext JS FAQ – часто задаваемые вопросы по Ext JS

  1. Какие существуют инструменты для разработки Ext JS приложений?
  2. Как использовать консольный билдэр Ext JS приложений Sencha Cmd?
  3. Как создать новое Ext JS приложение?
  4. Как скомпилировать Ext JS приложение?
  5. Как запустить Ext JS приложение?
  6. Какая архитектура у Ext JS приложений?
  7. Из чего состоит проект Ext JS приложения?
  8. Откуда начинается старт Ext JS приложения?
  9. Как добавить в Ext JS приложение модель, вид или контроллер?
  10. Как создать новый класс?
  11. Как создать класс-наследник?
  12. Как переопределить метод суперкласса?
  13. Как создать класс являющийся синглтоном?
  14. Как создать экземпляр класса?
  15. Что является аналогом в Ext JS для jQuery-функции $(document).ready()?
  16. Как узнать класс экземпляра?
  17. Как подгрузить JavaScript-класс?
  18. Как добавить на страницу виджет?

Какие существуют инструменты для разработки Ext JS приложений?

Бесплатный консольный билдэр Ext JS приложений: Sencha Cmd.
Средства внутрибраузерной отладки:
Бесплатная online-песочница: Sencha Fiddle.
Платные плагины для IDE:

Как использовать консольный билдэр Ext JS приложений Sencha Cmd?

  • Формат команд для Sencha Cmd следующий:
    • sencha [category] [command] [options…] [arguments…]
  • Справка по категориям команд, высокоуровневым командам, опциям:
    • sencha help
  • Справка по конкретной категории команд:
    • sencha help app
  • Справка по конкретной команде из конкретной категории команд:
    • sencha help app clean
  • Проверка на наличие обновлений для Sencha Cmd:
    • sencha upgrade --check
  • Обновление Sencha Cmd:
    • sencha upgrade
  • Установленная версия Sencha Cmd:
    • sencha which

Как создать новое Ext JS приложение?

Для создания стаба приложения нужно использовать Sencha Cmd.
  • Создать универсальное приложение с названием MyApp в папке ./myapp:
    • sencha generate app --ext MyApp ./myapp
  • Создать мобильное Sencha Touch приложение:
    • sencha generate app --ext --modern MyApp ./myapp
  • Создать классическое Ext JS приложение:
    • sencha generate app --ext --classic MyApp ./myapp
  • Создать приложение используя другую версию фреймворка Sencha Ext JS:
    • sencha -sdk /bin/Sencha/ext/6.0.0/ generate app MyApp /projects/extjs/myapp
    • sencha -sdk /Users/SomeUser/bin/Sencha/Cmd/repo/extract/ext/6.0.0/ generate app MyApp /Users/SomeUser/projects/extjs/myapp
  • Обновление SDK для Ext JS приложения:
    • sencha app upgrade [ path-to-new-framework ]

Как скомпилировать Ext JS приложение?

  • Сборка (build) - процесс получения Ext JS приложения из исходного кода (HTML, JavaScript, Sass):
    • sencha app build
  • Сборка мобильного Sencha Touch приложения:
    • sencha app build modern
  • Сборка классического Ext JS приложения:
    • sencha app build classic
Конфигурация для modern и classic вариантов находится в файле app.json.

Как запустить Ext JS приложение?

Для того чтобы посмотреть на приложение надо использовать Sencha Cmd, предварительно перейдя в папку с приложением.
  • Сделать сборку и запустить приложение:
    • sencha app watch
  • Сделать сборку и запустить мобильное Sencha Touch приложение:
    • sencha app watch modern
  • Сделать сборку и запустить классическое Ext JS приложение:
    • sencha app watch classic

Какая архитектура у Ext JS приложений?

Ext JS поддерживает архитектуры Model-View-Controller и Model-View-ViewModel.
  • Модель (model) состоит из сущностей, атрибутов этих сущностей и отношений между этими сущностями. В Ext JS модель используется совместно с хранилищем (store). Хранилище - это коллекция экземпляров сущностей представленных в модели. Например, сущностью может быть Город, а экземпляром – Анкара или Баку.
  • Вид (view) отвечает за визуализацию Ext JS приложения. Например, в качестве вида может выступать форма с кнопками. Проще говоря, вид - это пользовательский интерфейс, посредством которого пользователь взаимодействует с Ext JS приложением.
  • Контроллер (controller) используется для реализации реакции на действия пользователя. В Ext JS есть два типа контроллеров: Ext.app.ViewController и Ext.app.Controller.
  • Модель вида (viewmodel) связывает данные с видом и обновляет вид при изменении данных.

Из чего состоит проект Ext JS приложения?

Основные компоненты проекта Ext JS приложения это:
  • app\model\ - модель;
  • app\store\ - хранилище;
  • app\Application.js - главный класс приложения;
  • classic\ - виды (views) и стили для классического Ext JS приложения;
  • modern\ - виды (views) и стили для мобильного Sencha Touch приложения;
  • sass\ - общие стили;
  • ext\ - код фреймворка Sencha Ext JS.

Откуда начинается старт Ext JS приложения?

В файле app.js метод Ext.application подгружает класс Ext.app.Application и стартует его с переданной ему в качестве аргумента конфигурацией приложения:
Ext.application({
    name: 'MyApp',
    extend: 'MyApp.Application',
    requires: ['MyApp.view.main.Main'],
    mainView: 'MyApp.view.main.Main'
});
В качестве аргумента, вместо конфигурации приложения, может быть передано имя класса унаследованного от класса Ext.app.Application:
Ext.application('MyApp.Application');
Главный класс приложения, в данном случае MyApp.Application, определен в файле app\Application.js:
Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',
    stores: [],
    launch: function() {},
    onAppUpdate: function() {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
        function(choice) {
            if (choice === 'yes') {
                window.location.reload();
            }
        });
    }
});
Имя приложения (name) обязательно для указания и не должно содержать специальных символов. Имя приложения также является пространством имен (namespace) для видов, контроллеров, моделей и хранилищ (store). В процессе программирования мы создаем имена для видов, контроллеров, моделей и хранилищ. А в процессе исполнения кода эти имена сопоставляются с чем-то реальным в оперативной памяти. Множество связей от всех имен до их реального представления в оперативной памяти называется пространством имен. В любой момент времени можно спросить у пространства имен, а связано ли с конкретным именем что-нибудь в оперативной памяти.

Как добавить в Ext JS приложение модель, вид или контроллер?

  • sencha generate model MyModel id:int,fname,lname
  • sencha generate view myApp.MyView
  • sencha generate controller MyController
При генерации модели, если не указывать тип поля, то по умолчанию используется string.

Как создать новый класс?

Функция Ext.define(name, data, callback) используется для определения новых классов. Она принимает три параметра:
  • name - имя класса;
  • data - свойства класса;
  • callback - опциональная функция, которая будет вызвана после создания класса.
Пример создания класса Car:
Ext.define('Car', {
    name: null,
    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },
    start: function() {
        alert('Car started');
    }
});

Как создать класс-наследник?

Ext.define('ElectricCar', {
    extend: 'Car',
    start: function() {
        alert("Electric car started");
    }
});

Как переопределить метод суперкласса?

Ext.define('My.ux.field.Text', {
    override: 'Ext.form.field.Text',
    setValue: function(val) {
        this.callParent(['In override']);
        return this;
    }
});

Как создать класс являющийся синглтоном?

Ext.define('Logger', {
    singleton: true,
    log: function(msg) {
        console.log(msg);
    }
});

Как создать экземпляр класса?

var myCar = Ext.create('ElectricCar', {
    name: 'MyElectricCar'
});
Если включен Ext.Loader, то Ext.create автоматически синхронно подгрузит соответствующий JavaScript-файл, если вдруг класс ElectricCar еще не определен. По умолчанию Ext.Loader включен, но его можно выключить установив опции enabled значение false.
Также создать экземпляр класса можно с помощью ключевого слова new. Но в таком случае подгрузки соответствующего JavaScript-файла происходить не будет.
var myCar = new ElectricCar('MyElectricCar');

Что является аналогом в Ext JS для jQuery-функции $(document).ready()?

Ext.onReady(function() {
    new Ext.Component({
        renderTo: document.body,
        html: 'DOM ready!'
    });
});

Как узнать класс экземпляра?

Метод Ext.getClass возвращает класс заданного объекта, если экземпляр был создан с помощью Ext.define или null в противном случае. Метод Ext.getClassName возвращает имя класса по ссылке на него или по его экземпляру.
var button = new Ext.Button();
Ext.getClass(button); // returns Ext.Button
Ext.getClassName(Ext.Button); //returns "Ext.Button"

Как подгрузить JavaScript-класс?

Класс Ext.Loader обеспечивает динамическую загрузку зависимостей. Для того чтобы подгрузить класс по его имени используется метод Ext.require:
Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);
Можно импортировать все классы и пространства:
Ext.require(['widget.*', 'layout.*', 'Ext.data.*');
Также можно и исключить что-то ненужное:
Ext.exclude('Ext.data.*').require('*');
Если зависимость указывается при определении класса, то требуемые классы загружаются асинхронно. Если не указывать требуемые классы при определении, тогда при создании экземпляра класса через Ext.Create, файлы классов будут загружаться синхронно, если еще не загружены.
Путь к файлу для загрузки класса формируется на основании имени класса. Например путь к классу MyApp.view.About будет \myapp\view\about.js.

Как добавить на страницу виджет?

Пример создания экземпляра компонента Ext.panel.Panel, используя полное имя класса:
 Ext.create('Ext.panel.Panel', {
     renderTo: Ext.getBody(),
     title: 'Panel'
 });
Но есть более краткий вариант. При определении класса можно задать ему псевдоним (alias). Например, класс Ext.panel.Panel имеет псевдоним widget.panel. Для того чтобы создать виджет по псевдониму можно использовать метод Ext.widget:
 Ext.widget('panel', {
     renderTo: Ext.getBody(),
     title: 'Panel'
 });
Список всех псевдонимов виджетов можно посмотреть в перечислении Ext.enums.Widget.
Через метод Ext.create также можно создать виджет по псевдониму:
 Ext.create('widget.panel', {
     renderTo: Ext.getBody(),
     title: 'Panel'
 });
Псевдонимы виджетов также используются в качестве значений для конфигурационного поля xtype, которое удобно применять при определении экземпляров компонента внутри контейнера:
// без использования xtype:
items: [
Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Foo'
}),
Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Bar'
}),
Ext.create('Ext.form.field.Number', {
    fieldLabel: 'Num'
})]

// с использованием xtype:
items: [{
    xtype: 'textfield',
    fieldLabel: 'Foo'
}, {
    xtype: 'textfield',
    fieldLabel: 'Bar'
}, {
    xtype: 'numberfield',
    fieldLabel: 'Num'
}]