java script + extjs
TRANSCRIPT
![Page 1: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/1.jpg)
JavaScript basics
![Page 2: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/2.jpg)
• Functions in JavaScript
• Arguments Object
• Function parameters
• Using function by reference
![Page 3: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/3.jpg)
Functions can return functions
![Page 4: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/4.jpg)
• Scope in JavaScript
• Strict equal operator
• Strict not equal operator
![Page 5: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/5.jpg)
JavaScript Objects
![Page 6: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/6.jpg)
• What is JavaScript Object?
• How to create JavaScript Object
• Constructor
• Private members
• Static Objects
![Page 7: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/7.jpg)
• [prototype]
• Object inheritance in JavaScript
Object(parent)
FirstChild SecondChild
[prototype] [prototype]
![Page 8: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/8.jpg)
How prototype works?
![Page 9: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/9.jpg)
Let’s add prototype object to Point
=> Looking for toString in homePoint object
=> Got it in prototype
![Page 10: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/10.jpg)
When using prototypes can be evil?
![Page 11: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/11.jpg)
This in JavaScript
![Page 12: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/12.jpg)
• this in objects
• Apply/Call methods
![Page 13: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/13.jpg)
DOM
![Page 14: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/14.jpg)
html
head body
title
Document title Document body
![Page 15: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/15.jpg)
• Events
• How to call event?
• Event Object
![Page 16: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/16.jpg)
Questions?
![Page 17: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/17.jpg)
ExtJs
![Page 18: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/18.jpg)
1. Що таке ExtJs? І навіщо “воно” нам?
2. Структура проекту.
3. Компоненти. Цикл життя.
4. Контейнери. Лайаути.
5. Робота з даними. Ajax.
6. XTemplate.
7. Відладка.
8. Що далі?
Зміст
![Page 19: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/19.jpg)
Що таке ExtJs?
• ExtJS (EXTended JavaScript) – яваскриптфреймворк для побудови бізнес аплікацій із широким набором компонентів і засобів роботи з даними
• Розроблявся як розширення для YUIбібліотеки. (2006р.)
• Але в міру своєї популярності в 2007р. відділився у окремий фреймворк і компанію Ext. (зараз уже Sencha).
![Page 20: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/20.jpg)
• Найширший набір компонентів.
• Поведінка компонентів аналогічна поведінці десктоп аналогів.
• Документація.
• Можливість розширення набору компонентів, класів.
• Крос-браузерність.
Навіщо “воно” нам?
![Page 21: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/21.jpg)
Структура проекту
![Page 22: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/22.jpg)
Компоненти
![Page 23: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/23.jpg)
Цикл життя
![Page 24: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/24.jpg)
Цикл життя: ініціалізація
![Page 25: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/25.jpg)
Цикл життя: рендерінг
![Page 26: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/26.jpg)
Цикл життя: знищення
![Page 27: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/27.jpg)
Контейнер – це компонент, що може мати дочірні компоненти.
Контейнер має певний лайаут дочірніх компонентів.
Лайаут контейнера здійснює рендерингдочірніх компонентів.
Контейнери. Лайаути.
![Page 28: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/28.jpg)
Контейнери. Лайаути.
![Page 29: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/29.jpg)
Робота з даними. Ajax
• Ext.data.Store
• Ext.data.DataProxy
• Ext.data.DataReader
• Ext.data.DataWriter
• Ext.data.Record
• Ext.Ajax
![Page 30: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/30.jpg)
XTemplate
Клас, що використовується для заповнення наперед заданого темпліту даними.
В ExtJs 4 цей клас є основним в процесі рендерингу компонентів.
![Page 31: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/31.jpg)
Відладка
• FireFox + FireBug + Illuminations
• Chrome
FireFox 3D view
![Page 32: Java script + extjs](https://reader034.vdocuments.net/reader034/viewer/2022042516/559701a01a28abf8358b46a4/html5/thumbnails/32.jpg)
Що далі?
http://www.jsmag.com/
http://www.bryntum.com/products/siesta/
http://www.sencha.com/
ExtJs 4.1
Sencha Touch 2.0
http://seleniumhq.org/ ExtJs in Action
JavaScript: The Good Parts