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

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

Бесплатный консольный билдэр Ext JS приложений: Sencha Cmd.
Средства внутрибраузерной отладки:

платный плагин Illumination для Firefox + Firebug;
бесплатный плагин App Inspector для Chrome.

Бесплатная online-песочница: Sencha Fiddle.
Платные плагины для IDE:

JetBrains (IntelliJ, WebStorm, PhpStorm, RubyMine и PyCharm);
Eclipse (Mars и Luna);
Visual Studio (Enterprise, Professional и Community).

Как использовать консольный билдэр 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 приложением.

app\view\main\Main.js - главный вид, если приложение создавалось либо с ключом --modern, либо с ключом --classic.
modern\src\view\main\Main.js - главный вид для мобильного Sencha Touch приложения.
modern\src\view\main\List.js
classic\src\view\main\Main.js - главный вид для классического Ext JS приложения.
classic\src\view\main\List.js

Контроллер (controller) используется для реализации реакции на действия пользователя. В Ext JS есть два типа контроллеров: Ext.app.ViewController и Ext.app.Controller.

app\view\main\MainController.js - контроллер для главного вида в приложении.

Модель вида (viewmodel) связывает данные с видом и обновляет вид при изменении данных.

app\view\main\MainModel.js - модель вида для главного вида Main.

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

Основные компоненты проекта Ext JS приложения это:

app\model\ - модель;
app\store\ - хранилище;
app\Application.js - главный класс приложения;
classic\ - виды (views) и стили для классического Ext JS приложения;

classic\src\ - виды (views);
classic\sass\ - стили;

modern\ - виды (views) и стили для мобильного Sencha Touch приложения;

modern\src\ - виды (views);
modern\sass\ - стили;

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'
}]