extjs учебник
Начало работы с extjs

замечания

Версии

Создание приложения Hello World - Via Sencha Cmd

Этот пример демонстрирует создание базового приложения в ExtJS с использованием Sencha Cmd для загрузки процесса - этот метод автоматически генерирует некоторый код и структуру скелета для проекта.

Откройте консольное окно и измените рабочий каталог на подходящее пространство для работы. В том же окне и в каталоге выполните следующую команду для создания нового приложения.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

Примечание. Флаг -sdk указывает местоположение каталога, извлеченного из каркасного архива.

В ExtJS 6+ Sencha объединили рамки ExtJS и Touch в единую кодовую базу, дифференцированную терминами классический и современный соответственно. Для простоты, если вы не хотите настраивать таргетинг на мобильные устройства, в команде может быть указан дополнительный флаг, чтобы уменьшить беспорядок в рабочей области.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

Без какой-либо дополнительной конфигурации полностью функциональное демо-приложение должно теперь находиться в локальном каталоге. Теперь измените рабочий каталог на новый каталог проекта HelloWorld и запустите:

> sencha app watch

При этом проект компилируется с использованием профиля построения по умолчанию и запускается простой HTTP-сервер, который позволяет просматривать приложение локально через веб-браузер. По умолчанию на порт 1841 .

Установка и настройка

Типичное использование ExtJS использует структуру для создания одностраничных богатых приложений (RIA). Самый простой способ начать использовать Sencha Cmd , инструмент построения CLI, охватывающий большинство общих проблем в жизненном цикле развертывания, в первую очередь:

• управление пакетами и зависимостями
• компиляция / комплектация кода и его обобщение
• управление стратегиями построения для разных целей и платформ

» Скачать Sencha Cmd

Второй шаг - загрузить SDK, ExtJS - это коммерческий продукт - для получения копии, один из:

• Войти в Sencha Поддержка версии лицензий на продажу ( страница продукта )
• обратиться за оценочной копией, которая будет действительна в течение 30 дней
• запросить версию GPL v3 для проектов с открытым исходным кодом
  (обратите внимание, что вы не сможете получить доступ к последней версии с помощью этой опции)

После загрузки SDK убедитесь, что архив извлечен, прежде чем продолжить.

Примечание . См. Официальную документацию « Начало работы» для всестороннего руководства по проектам ExtJS.

После установки Sencha Cmd его можно проверить, открыв консольное окно и запустив его:

> sencha help

Теперь у нас есть инструменты, необходимые для создания и развертывания приложений ExtJS, обратите внимание на расположение каталога, в котором был извлечен SDK, поскольку это потребуется в следующих примерах.

Создание приложения Hello World - в ручном режиме

Давайте начнем использовать ExtJS для создания простого веб-приложения.

Мы создадим простое веб-приложение, которое будет иметь только одну физическую страницу (aspx / html). Как минимум, каждое приложение ExtJS будет содержать один HTML и один файл JavaScript - обычно index.html и app.js.

Файл index.html или ваша страница по умолчанию будут содержать ссылки на CSS и JavaScript-код ExtJS вместе с вашим файлом app.js, содержащим код для вашего приложения (в основном, отправную точку вашего веб-приложения).

Давайте создадим простое веб-приложение, которое будет использовать компоненты библиотеки ExtJS:

Шаг 1. Создание пустого веб-приложения.

Как показано на скриншоте, я создал пустое веб-приложение. Чтобы сделать его простым, вы можете использовать любой проект веб-приложения в редакторе или в IDE по вашему выбору.

Шаг 2: добавьте веб-страницу по умолчанию

Если вы создали пустое веб-приложение, нам нужно включить веб-страницу, которая будет стартовой страницей нашего приложения.

Шаг 3: Добавить Ext Js Ссылки на Default.aspx

Этот шаг показывает, как мы используем библиотеку extJS. Как показано на скриншоте в Default.aspx, я только что назвал 3 файла:

• Ext-all.js
• доб-all.css
• app.js

Sencha сотрудничает с CacheFly, глобальной контентной сетью, для предоставления бесплатного хоста CDN для платформы ExtJS. В этом примере я использовал библиотеку CDN Ext, однако мы могли использовать те же файлы (ext-all.js и ext-all.css) из нашего каталога проектов или в качестве резервных копий в случае недоступности CDN.

Обратившись к app.js, он будет загружен в браузер, и это будет отправной точкой для нашего приложения.

Помимо этих файлов, у нас есть местозаполнитель, где будет отображаться пользовательский интерфейс. В этом примере у нас есть div с id «whitespace», который мы будем использовать позже для визуализации интерфейса.

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

Шаг 4. Добавьте папку приложения & app.js в свой веб-проект.

ExtJS предоставляет нам способ управления кодом в шаблоне MVC. Как показано на скриншоте, у нас есть контейнерная папка для нашего приложения ExtJS, в данном случае «приложение». Эта папка будет содержать весь наш код приложения, разделенный на различные папки, т. Е. Модель, представление, контроллер, хранилище и т. Д. В настоящее время он имеет только файл app.js.

Шаг 5: Напишите свой код в app.js

App.js является отправной точкой нашего приложения; для этого образца я только что использовал минимальную конфигурацию, необходимую для запуска приложения.

Ext.application представляет собой приложение ExtJS, которое выполняет несколько действий . Он создает глобальную переменную « SenchaApp », указанную в конфигурации имен, и все классы приложений (модели, представления, контроллеры, магазины) будут находиться в одном пространстве имен. Запуск - это функция, которая вызывается автоматически, когда все приложение готово (все классы загружаются должным образом).

В этом примере мы создаем Panel с некоторой конфигурацией и визуализируем его на заполнителе, который мы предоставили в Default.aspx.

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

Скриншот результатов

Когда вы запустите это веб-приложение с Default.aspx в качестве начальной страницы, в браузере появится следующее окно.