java script + extjs

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

• [prototype]

• Object inheritance in JavaScript

Object(parent)

FirstChild SecondChild

[prototype] [prototype]

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.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