Первый проект на ExtJS

Поскольку это один из самых популярных постов на сайте, если Вам что-то не понятно, оставляйте комментарии, вопросы etc. После модерации я постараюсь на них ответить.

Документации по этому вопросу вроде как много, но про MVC подход, да еще ExtJS 4, да еще по русски, я нормальной не нашел…

Постараюсь исправить это недоразумение своими потугами.

Итак, для начала скачаем сам ExtJS (на момент написания актуален 4.1)

Качать отседова: http://www.sencha.com/products/extjs/download?page=a

Создаем на сервере папку где будет работать проект, или в корне если у вас весь проект будет работать на ExtJS.

Я свою папку назвал ext-example

В ней создаем следующую структуру каталогов

App/

    • component/ — тут будем хранить самописные компоненты
    • controller/ — папка контроллеров
    • model/ — папка моделей (это я объясню если доползем до сторов)
    • store/ — папка сторов
    • view/ — папка шаблонов

Рядом с папкой App создаем index.html и App.js

index.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello Ext</title>
<!-- Поключение стилей-->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- На сей момент доступны такие темы -->
<!-- синенькая ext-all.css -->
<!-- серенькая ext-all-gray.css -->
<!-- темненькая ext-all-access.css -->

<!-- Иногда для пользовательских дополнений требуется "подкруть" дополнительные стили -->
<!-- Добовляем стиль для списка с чекбоксами в ячейках -->
<link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/CheckHeader.css" />

<!-- Поключаем сам фреймворк (вариантов либы много, подробнее о некоторых из них чуть ниже) -->
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<!-- ext-all-debug-w-comments.js - как понятно из названия это версия для дэбага с комментариями по коду (непомерно большОй файл!) -->
<!-- ext-all.js - версия упакованная -->

<!-- поключаем проект -->
<script type="text/javascript" src="App.js"></script>
</head>
<body></body>
</html>

App.js :

// Разрешаем менять конфиг
Ext.Loader.setConfig({enabled:true});
// Указываем папку для пользовательских расширений
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

Ext.application({
name: 'Example', // Имя проекта

appFolder: 'App', // Папка проекта

requires: [ // Тут подгружаем дополнительные модули (компоненты)
// Например самописные
// 'App.component.MyTree',
// Или из имеющихся
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
// Другие пользовательские плагины
'Ext.ux.CheckColumn'
],

launch: function() { // Заполняем проэкт объектами
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'myTestObj' // какой виджет надо "рисовать" после загрузки проекта
}
});
},

controllers: [
'testController' // Подгружаем контроллеры
]
});

Теперь создадим контроллер:

Ext.define('Example.controller.testController', { // Объявление контроллера где последовательность такова "имяПроекта.имяПапкиКонтроллеровВПапкеПроекта.имяФайлаКонтроллера"
extend: 'Ext.app.Controller', // Наследуем свой контроллер от стандартного экстового контроллера

views: [ // Список шаблонов контроллера
'testController.View'
]

});

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

Для этого воспользуемся ExtDesigner‘ом

Создадим проект ExtJS 4

Найдем в списке объектов панельку и разместив её на форме, добавим в неё «батон».

Должно получится так:

ExtDesigner

Теперь снизу нажимаем кнопочку Code, и получаем такое:

ExtDesigner

Копируем полученный код и вставляем в файл App/view/testController/View.js

Рассмотрим код подробнее:

Ext.define('MyApp.view.ui.MyPanel', { // тут на сомом деле должен быть указан путь к этому файлу имяПроекта.имяПапкиШаблонов.имяРодительскогоКонтроллера.имяФайлаШаблона
    extend: 'Ext.panel.Panel', // от кого унаследован объект

    height: 250, // "высь"
    width: 400, // "ширь"
    title: 'My Panel', // Название панели

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [ // Дочерние объекты панели
                {
                    xtype: 'button', // тип дочернего элемента (кнопки)
                    text: 'MyButton' // имя дочерней кнопки
                }
            ]
        });

        me.callParent(arguments);
    }
});

Следовательно нам надо поменять под себя первую строчку с:

Ext.define('MyApp.view.ui.MyPanel', {

на:

Ext.define('Example.view.testController.View', {

и добавить alias

alias: 'widget.myTestObj',

alias дает нам возможность создавать аналогичные объекты просто задав

...
xtype: 'myTestObj'
...

И вызывать этот шаблон из конструктора проекта, как шаблон по умолчанию (см. выше)

Теперь надо к кнопке прикрутить event показывающий Alert

Сначала надо как-то идентифицировать кнопку, для этого достаточно задать ей id

...
{
xtype: 'button',
text: 'MyButton',
id: 'testButton'
}
...

Можно было это сделать в ExtDesigner‘е, но я протупил 😉

Вы кстати еще не закрыли ExtDesigner? Нет? Смело закрывайте!

Дело в том что он нужен только для того чтобы быстро рисовать компоненты, на этом его функциональность заканчивается, однако от этого он не перестает быть полезным!

Теперь возвращаемся в файл контроллера и пишем код (после объявления списка шаблонов)

init: function() { // в конструкторе
this.control({ // "Привязываем" события
'button[id=testButton]': { // кнопке с id=testButton
click: this.testButtonAction // по клику выполнить функцию testButtonAction
}
});
}

Не забыв свойства объекта разделить запятыми!

Теперь все в том же контроллере надо создать функцию testButtonAction

testButtonAction: function(button) { // параметры при клике на "батон" "click( Ext.button.Button this, Event e, Object eOpts )". Посмотреть подробнее можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click
Ext.MessageBox.alert('Test alert title', 'Test alert text');
// У алерта на самом деле гораздо больше параметров, посмотреть можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.MessageBox-method-alert
}

Опять не забыв про запятые!

В итоге должно получится так:

Ext.define('Example.controller.testController', { // Объявление контроллера где последовательность такова "имяПроекта.имяПапкиКонтроллеровВПапкеПроекта.имяФайлаКонтроллера"
extend: 'Ext.app.Controller', // Наследуем свой контроллер от стандартного экстового контроллера

views: [ // Список шаблонов контроллера
'testController.View'
],

init: function() {
this.control({ // "Привязываем" события
'button[id=testButton]': { // кнопке с id=testButton
click: this.testButtonAction // по клику выполнить функцию testButtonAction
}
});
},

testButtonAction: function(button) { // параметры при клике на ботон "click( Ext.button.Button this, Event e, Object eOpts )". Посмотреть подробнее можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-event-click
Ext.MessageBox.alert('Test alert title', 'Test alert text');
// У алерта на самом деле гораздо больше пораметров, посмотреть можно тут http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.MessageBox-method-alert
}
});

Теперь открываем в браузере проект (в моем случае это http://localhost/ext-example/ )

И получаем:

Пример проекта на ExtJS

Нажимаем на кнополку и получаем:

Пример проекта на ExtJS

Если не получилось, то вот мои сорцы:

ext-example

Прошу не судить строго, т.к. данный framework я изучал (почти) самостоятельно долго рОясь в Google, и чего-то мог не понять, или понять не до конца, или понять, но неправильно…

Добавить комментарий

Ваш адрес email не будет опубликован.