KEMBAR78
Java script + extjs | PPTX
JavaScript basics
• Functions in JavaScript




• Arguments Object
• Function parameters
• Using function by reference
Functions can return functions
• Scope in JavaScript




• Strict equal operator
• Strict not equal operator
JavaScript Objects
•   What is JavaScript Object?
•   How to create JavaScript Object
•   Constructor
•   Private members
•   Static Objects
• Object inheritance in JavaScript
• [prototype]

                       Object(parent)
         [prototype]                     [prototype]



     FirstChild                         SecondChild
How prototype works?
Let’s add prototype object to Point




                       => Looking for toString in homePoint object

                                  => Got it in prototype
When using prototypes can be
           evil?
This in JavaScript
• this in objects
• Apply/Call methods
DOM
html




    head                    body



     title



Document title          Document body
• Events
• How to call event?
• Event Object
Questions?
ExtJs
Зміст
1.   Що таке ExtJs? І навіщо “воно” нам?
2.   Структура проекту.
3.   Компоненти. Цикл життя.
4.   Контейнери. Лайаути.
5.   Робота з даними. Ajax.
6.   XTemplate.
7.   Відладка.
8.   Що далі?
Що таке ExtJs?
• ExtJS (EXTended JavaScript) – яваскрипт
  фреймворк для побудови бізнес аплікацій
  із широким набором компонентів і засобів
  роботи з даними
• Розроблявся як розширення для YUI
  бібліотеки. (2006р.)
• Але в міру своєї популярності в 2007р.
  відділився у окремий фреймворк і
  компанію Ext. (зараз уже Sencha).
Навіщо “воно” нам?
• Найширший набір компонентів.
• Поведінка компонентів аналогічна
  поведінці десктоп аналогів.
• Документація.
• Можливість розширення набору
  компонентів, класів.
• Крос-браузерність.
Структура проекту
Компоненти
Цикл життя
Цикл життя: ініціалізація
Цикл життя: рендерінг
Цикл життя: знищення
Контейнери. Лайаути.
Контейнер – це компонент, що може мати
дочірні компоненти.
Контейнер має певний лайаут дочірніх
компонентів.
Лайаут контейнера здійснює рендеринг
дочірніх компонентів.
Контейнери. Лайаути.
Робота з даними. Ajax
• Ext.data.Store
• Ext.data.DataProxy
• Ext.data.DataReader
• Ext.data.DataWriter
• Ext.data.Record
• Ext.Ajax
XTemplate
Клас, що використовується для заповнення
наперед заданого темпліту даними.
В ExtJs 4 цей клас є основним в процесі
рендерингу компонентів.
Відладка
• FireFox + FireBug + Illuminations
• Chrome




                               FireFox 3D view
Що далі?

http://www.sencha.com/
                                              http://www.jsmag.com/
JavaScript: The Good Parts


http://www.bryntum.com/products/siesta/
                                                       ExtJs 4.1

        http://seleniumhq.org/       ExtJs in Action



Sencha Touch 2.0

Java script + extjs