Привет, ребята, Леви Хэк с здесь. Сегодня мы собираемся обсудить четвертую версию среды JavaScript, ExtJS . Мы рассмотрим, что это такое, как его установить, а затем продемонстрируем всю мощь ExtJS, собрав надежную сетку данных, используя некоторые примеры данных, которые я собрал.
Этот учебник включает в себя скринкаст, доступный для пользователей Tuts + Premium.
Шаг 1 — Что такое ExtJS?
Итак, давайте начнем с того, что на самом деле представляет ExtJS. ExtJS, разработанный компанией Sencha, представляет собой JavaScript-фреймворк, специально разработанный для создания веб-приложений. Основное отличие между JavaScript-фреймворком, таким как ExtJS, и JavaScript-библиотекой, такой как jQuery, заключается в том, что ExtJS предназначен для создания целых приложений — все необходимые инструменты находятся внутри фреймворка, а jQuery предназначен для размещения в существующем сайте. добавить функциональность.
«Основное отличие между JavaScript-фреймворком, таким как ExtJS, и JavaScript-библиотекой, такой как jQuery, заключается в том, что ExtJS предназначен для создания целых приложений — все необходимые инструменты находятся внутри фреймворка, а jQuery предназначен для размещения на существующем сайте. добавить функциональность .. «
Шаг 2 — Установите ExtJS
Чтобы установить ExtJS, нам сначала нужно скачать его с сайта Sencha. Перейдите по адресу http://www.sencha.com/products/extjs и нажмите кнопку «Загрузить» в верхнем правом углу. На этой странице вы увидите раздел под названием «Работа с открытым исходным кодом?» Далее следует ссылка на скачивание ExtJS 4.0.2a — последняя версия. Перейдите по этой ссылке, и загрузка начнется в ближайшее время. Теперь вы заметите, что загрузка довольно большая, более 30 мегабайт. Это связано с тем, что загруженный вами zip-файл содержит не только файлы инфраструктуры ExtJS, но и все примеры и документацию, которые вы также найдете на веб-сайте Sencha. Кроме того, он также содержит несколько версий платформы: одну, которая полностью документирована и распакована для разработки, а другую — минимизирована и сжата для использования в производственных системах. Как только zip-файл загружен, извлеките его содержимое, возьмите созданную им папку и загрузите его на свой веб-сайт, как у меня здесь. Обратите внимание, что я переименовал папку просто в «extjs» — все строчные. Это облегчит ссылаться позже.
Теперь, когда мы просмотрели некоторую справочную информацию и загрузили Framework на наш сайт, давайте приступим к написанию кода. Теперь, как вы можете видеть из файлов проекта здесь слева, я уже настроил базовую структуру папок для нашего приложения, а также создал страницу index.html и пустой файл JavaScript script.js. HTML-страница — это место, где мы собираемся включить все необходимые сценарии, которые мы загрузили ранее, а файл JavaScript — это место, куда мы собираемся поместить весь код нашего приложения.
Шаг 3 — Включите необходимые файлы
|
01
02
03
04
05
06
07
08
09
10
|
<html>
<head>
<style>
</style>
<title></title>
<meta charset=UTF-8″>
</head>
<body>
</body>
</html>
|
Давайте начнем с открытия файла index.html. Как видите, я уже настроил базовую HTML-страницу, используя тип документа HTML5. Теперь я расскажу вам о необходимых файлах, которые вам понадобятся для создания приложения ExtJS, а также о том, как их включить.
Файл CSS
Первое, что мы хотим включить, это файл CSS. Без этого файла наше приложение не будет выглядеть правильно при рендеринге.
|
01
02
03
04
05
06
07
08
09
10
11
|
<html>
<head>
<style>
@import url(‘extjs/resources/css/ext-all.css’);
</style>
<title></title>
<meta charset=UTF-8″>
</head>
<body>
</body>
</html>
|
Файлы JavaScript
Далее нам нужно включить необходимые файлы JavaScript. Первый файл, который мы собираемся включить, это ext-all-debug; это вся библиотека ExtJS, несжатая. Во-вторых, мы хотим включить наш файл script.js. Помните, что это файл, в который войдет весь код нашего приложения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<html>
<head>
<script type = «text/javascript» src = «extjs/ext-all-debug.js»></script>
<script type = «text/javascript» src = «script.js»></script>
<style>
@import url(‘extjs/resources/css/ext-all.css’);
</style>
<title></title>
<meta charset=UTF-8″>
</head>
<body>
</body>
</html>
|
Полный скринкаст
Шаг 4 — Объявите сетку и огонь, когда будете готовы!
Теперь, когда мы включили все необходимые файлы, давайте начнем кодировать. Первое, что мы хотим сделать, это убедиться, что весь код, который мы пишем, запускается после завершения загрузки веб-страницы, поэтому мы завернем весь наш код при вызове функции Ext.onReady. Добавьте следующее в файл script.js:
|
1
2
|
Ext.onReady(function() {
});
|
Теперь есть две вещи, которые я хочу отметить в этом фрагменте кода: во-первых, мы передаем всю функцию в вызов метода (onReady). Это то, что называется обратным вызовом: функция, которая вызывается, как только завершается другая задача — в нашем случае загрузка страницы завершена. Во-вторых, вы заметите, что я предвосхитил вызов этого метода «Ext». Это называется пространством имен. Пространство имен — это способ хранения переменных и методов в отдельных контейнерах, чтобы предотвратить такие вещи, как столкновение переменных. ExtJS сильно зависит от пространств имен для правильной работы. Фактически, каждый вызов метода в ExtJS содержится, как минимум, в одном пространстве имен: Ext. По мере прохождения этого урока вы будете знакомиться с более сложными примерами использования пространства имен.
Хорошо, теперь, когда мы настроили наш метод onReady, давайте объявим нашу dataGrid. Обновите файл script.js следующим образом:
|
1
2
3
4
|
Ext.onReady(function() {
Ext.create(‘Ext.grid.Panel’, {
});
});
|
Здесь мы объявляем новый экземпляр или копию сетки данных ExtJS, передавая полное пространство имен Ext.grid.Panel методу create. Теперь вы также заметите пустые скобки, которые я передал. В JavaScript пара пустых скобок означает пустой объект. В ExtJS, когда вы создаете сетку данных (или любой другой объект) с использованием метода «create», вам нужно передать настройки или — в терминах ExtJS — конфигурацию для этого объекта, передав объект JavaScript с помощью свойств, представляющих свойства сетки мы создаем. Теперь, если это звучит немного запутанно, это будет иметь больше смысла, поскольку я иду вперед и настраиваю сетку данных. Давайте продолжим и сделаем это сейчас:
|
1
2
3
4
5
|
Ext.onReady(function() {
Ext.create(‘Ext.grid.Panel’, {
store: Ext.create(‘Ext.data.Store’, {})
});
})
|
Шаг 5 — Заполните таблицу — Объявите хранилище данных
Как видите, мы добавили свойство «store» в нашу сетку данных и присвоили ему экземпляр нового объекта — store. В ExtJS целью сетки данных является отображение данных, и эти данные должны откуда-то поступать: из магазина.
Магазин — это, по большей части, просто набор записей. Более реальным примером этого может быть приложение для контактов на вашем смартфоне. Часть приложения, которая позволяет вам видеть ваши контакты, является сеткой, а часть приложения, которая заполняет этот список контактов, является магазином.
Шаг 6 — Добавление полей в магазин
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
Ext.onReady(function() {
Ext.create(‘Ext.grid.Panel’, {
store: Ext.create(‘Ext.data.Store’, {
fields: [{
name: ‘id’,
type: ‘int’
}, {
name: ‘first_name’,
type: ‘string’
} ,{
name: ‘last_name’,
type: ‘string’
}, {
name: ‘dob’,
type: ‘date’,
dateFormat: ‘Ymd’
}]
})
});
});
|
Как видите, мы добавили свойство «поля» в наш объект магазина. Поля похожи на заголовки столбцов в электронной таблице. Если каждая строка в электронной таблице представляет собой одну запись, каждый столбец — или поле — в электронной таблице представляет некоторое свойство этой записи. Для нашего примера сегодня мы собираемся сделать сетку данных, заполненную контактами, чтобы каждая запись в магазине имела: идентификатор, который просто предоставляет уникальный идентификатор для каждой записи, имя, фамилию и дата рождения. Теперь, как вы можете видеть, для каждого поля мы указали свойство ‘name’ и свойство ‘type’. Эти свойства довольно просты: мы просто сообщаем нашему магазину, что это за поле и как оно должно называться. Теперь, когда вы дойдете до поля dob или даты рождения, вы заметите, что мы установили тип ‘date’ для обозначения поля даты — ничего там неуместного — но мы также добавили свойство dateFormat. Это свойство сообщает магазину, что в поле dob будет храниться значение даты в формате год, месяц, день. Это может показаться странным сейчас, но это станет довольно важным, как только мы начнем настраивать остальную часть сетки.
Шаг 7 — Заполните магазин данными
Теперь, когда мы настроили наш магазин и добавили несколько полей, давайте продолжим и заполним его данными:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
Ext.onReady(function() {
Ext.create(‘Ext.grid.Panel’, {
store: Ext.create(‘Ext.data.Store’, {
fields: [{
name: ‘id’,
type: ‘int’
}, {
name: ‘first_name’,
type: ‘string’
} ,{
name: ‘last_name’,
type: ‘string’
}, {
name: ‘dob’,
type: ‘date’,
dateFormat: ‘Ymd’
}],
data: [{
‘id’: 1,
‘first_name’: ‘John’,
‘last_name’: ‘Smith’,
‘dob’: ‘1950-03-04’
}, {
id: 2,
‘first_name’: ‘Jane’,
‘last_name’: ‘Doe’,
‘dob’: ‘1960-07-24’
}]
})
});
});
|
По сути, здесь мы заполнили наш магазин примерами данных, используя поля, которые мы определили ранее как шаблон. Если вы посмотрите внимательно, вы заметите, что имена свойств в данных совпадают с именами полей в свойстве ‘fields’ магазина. Это называется «картирование». Мы сопоставляем данные из свойства data с соответствующими полями в свойстве ‘fields’ магазина. Также обратите внимание, как мы убедились, что типы данных данных соответствуют типам данных магазина. Если вы их перепутали, вещи могут загружаться неправильно.
Шаг 8 Добавьте столбцы в сетку
Хорошо, это все, что нам нужно сделать, чтобы настроить хранилище сетки, так что давайте вернемся к настройке самой сетки. Следующее, что мы хотим настроить в нашей сетке — это столбцы. Это именно то, на что это похоже: мы собираемся настроить, какие столбцы будут отображаться при загрузке нашей сетки.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
Ext.onReady(function() {
Ext.create(‘Ext.grid.Panel’, {
width: ‘30%’,
store: Ext.create(‘Ext.data.Store’, {
fields: [{
name: ‘id’,
type: ‘int’
}, {
name: ‘first_name’,
type: ‘string’
} ,{
name: ‘last_name’,
type: ‘string’
}, {
name: ‘dob’,
type: ‘date’,
dateFormat: ‘Ymd’
}],
data: [{
‘id’: 1,
‘first_name’: ‘John’,
‘last_name’: ‘Smith’,
‘dob’: ‘1950-03-04’
}, {
id: 2,
‘first_name’: ‘Jane’,
‘last_name’: ‘Doe’,
‘dob’: ‘1960-07-24’
}]
}),
columns: [{
header: ‘ID’,
dataIndex: ‘id’
}, {
header: ‘First Name’,
dataIndex: ‘first_name’
}, {
header: ‘Last Name’,
dataIndex: ‘last_name’
}, {
header: ‘Date of Birth’,
dataIndex: ‘dob’,
format: ‘m/d/Y’,
xtype: ‘datecolumn’
}]
});
});
|
Как и раньше, мы объявили свойство — «столбцы» — и передали массив объектов, каждый из которых представляет один столбец в сетке. Обратите внимание, что каждый столбец содержит как минимум два свойства: header и dataIndex. Заголовок указывает, что отображается как заголовок столбца в сетке (что увидит пользователь); dataIndex сопоставляет этот столбец с определенным полем в магазине. Вот и все! Это все, что вам нужно сделать, чтобы построить сетку данных.
Шаг 9 Показать сетку
Однако прежде чем мы сможем сказать, что мы полностью закончили, нам нужно отобразить сетку на экране. Для этого давайте сохраним нашу сетку в переменной, которую мы можем использовать позже:
|
1
2
3
|
…
var grid = Ext.create(‘Ext.grid.Panel’, {
…
|
Все, что мы здесь говорим, это «Сетка, визуализация в тело документа HTML» — довольно прямо. Продолжите и обновите наш файл index.html и посмотрите, как мы это сделали. Как вы можете видеть, менее чем за 30 минут мы создали надежную сетку данных, которая обладает всеми этими функциями: мы можем отображать и скрывать столбцы, сортировать данные и переставлять столбцы. В этом сила ExtJS!
Рассмотрение
В Review мы обсудили, что такое ExtJS, разницу между библиотекой и инфраструктурой, как загрузить и установить ExtJS, а также обсудили, как определить и настроить объект ExtJS — в данном случае сетку данных.
Где найти больше информации
Если вы хотите больше узнать о ExtJS и прочитать документацию, я настоятельно рекомендую вам посетить sencha.com веб-сайт и посмотрите их документы API для ExtJS 4. Здесь вы найдете всю информацию, необходимую для разработки собственных приложений. Если вы застряли, вы можете проверить форумы sencha.com и попросить их о помощи, или любой другой сайт программирования, на котором есть доска объявлений.