ExtJS - очень мощный framework, с кучей возможностей, начиная от простого управления DOM'ом
до создания RICH приложений. Примеры можно глянуть на офф. сайте - http://www.sencha.com/products/extjs/examples/#sample-6
Так же самое главное ExtJS полностью кроссбраузерен! Собственного из-за этого весит достаточно много.
Данный framework полностью Объектно Ореинтированный. Имеет структуру MVC (опционально).
Каждый компонент, буд-то кнопка, панель, дерево, или же поле для ввода - это ОБЪЕКТ, это надо запомнить!
Каждый компонент расширяем, т.е создав панель внутрь можно положить еще куча панелей, кнопок, менюшек и что душе угодно,
т.е иерархия компонентов очень большая.
Каждый объект (компонент) имеет так же стандартные настройки для управления им, ширина, высота, хранилище и многое другое!
Всю информацию о св-вах, методах и компонентов можно найти на офф. сайте, раздел API http://docs.sencha.com/ext-js/4-1/#!/api
Бывает такое, что не можешь понять что откуда берется, например открыв API и взяв компонент panel http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel мы можем увидеть много стандартных св-в и методов, но нет того, который указан где ибудь в мануале..для этого нужно пройти в родительские классы, и глянуть там!
Хватит с болтавней. Пора бы уже переходить к делу :)
Мы раматриваем ExtJS версии 4.1 (последняя версия на данную дату).
Для того, чтобы начать работать с ней, нужно скачать полный пакет http://www.sencha.com/products/extjs/download?page=a
Теперь, когда мы распокавали и приготовилиьс к работе, создадим новый файл, для наших тестов...
Подключаем в начале наш framework
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/ext-all.js"></script>
Далее, чтобы наше приложение работало, надо провести маленькие настройки, пишем :
Ext.Loader.setConfig({enabled: true});
// указываем нашу папку с framework'ом
Ext.Loader.setPath('Ext', '/assets/js/extjs');
// Указываем какие библиотеки подключить, можно внутри написать просто '*' и он подключит всё
Ext.require([
'Ext.Msg'
]);
//После наших настроек можно приступать к работе.
//Пишем
// Метод onReady отвечает за запуск скрипта внутри анонимной функции по завершении загрузки страницы
Ext.onReady(function(){
// Метод alert из пакета Ext.Msg равносилен стандарной JS функции alert();,
// первый параметр - это загаловок, второй сам текст
Ext.Msg.alert('Загаловок','Hello World');
});
Полный код, страница (не забудте указывать правильные пути)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="/assets/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/assets/js/extjs/ext-all.js"></script>
<script type="text/javascript" src="/assets/js/test.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
файл test.js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext', '/assets/js/extjs');
Ext.require([
'Ext.Msg'
]);
Ext.onReady(function(){
Ext.Msg.alert('Приветствие','Hello World');
});
Запускаем, и любуемся)
У нас есть еще и другие компоненты, которые сейчас рассмотрим...
1) Компонент Ext.panel.Panel
Данный компонент преднозначен для создания панелей, как бы контейнеров для кнопок, форм, других панелей и т.п
Рассмотрим на примере:
Для начала добавим наш компонент в блок Ext.require([..
Ext.require([
'Ext.Msg',
'Ext.panel.*'
]);
Внутри блока onReady пишем
var panel = Ext.create('Ext.panel.Panel', {
title : 'Моя панель',
width : 600,
height: 300,
html : ' Контент Контент Контент Контент Контент ',
renderTo : 'test'
});
Теперь по порядку:
1) первым делом мы создаем наш компонент, таким образом Ext.create('Ext.panel.Panel', {});
первым параметром в функцию Ext.create передается название нашего компонента,
вторым параметром передается объект с нашими надстройками
2) св-во title отвечает за заголовок компонента (панели)
3) width, height ширина и высота соотвественно (остальные св-во можно глянуть в API)
4) св-во html отвечает за содержимое, в виде HTML
5) св-во renderTo отвечает за отображение, ему указывается ID дива, куда поместить наш компонент
А теперь мы расмотрим как вкладывать внутрь компонента еще компонент:
var panel = Ext.create('Ext.panel.Panel', {
title : 'Моя панель',
width : 600,
height: 300,
renderTo : 'test',
layout : 'border',
defaults : {
padding: '3'
},
items : [{
xtype : 'panel',
region: 'west',
title : 'Вложенная первая',
html : 'контент контент контент '
},{
xtype : 'panel',
region: 'center',
title : 'Вложенная вторая',
html : 'контент контент контент '
}]
});
1) Самое главное в построении многоуровневых компонентов - это следить за рапсположением элементов, св-вом layout
в ExtJS есть такое понятие как слои "layout" они отвечают за расположения эл-тов, основным явлется слой border,
так же существуеют еще несколько, можно глянуть пройдя по ссылке http://dev.sencha.com/deploy/ext-4.1.0-gpl...ut-browser.html
Слой border подразумеваем расположения объектов по всем сторонам (region) рабочей области, основополагующим регионом является 'center',
без него наша панель не будет работать(!!!) т.к все остальные эл-ты позиционируются относительно него!
Регионы бывают : center, west, north, south, east.
В каждый регион можно положить еще панель, и дать ей слой border, и так же раскидать внутри неё еще панельки дав им свои регионы, наглядный пример
http://dev.sencha.com/deploy/ext-4.1.0-gpl...out/border.html
Регионы назначаются дочерним эл-там панели, внутри items...
2) Рассмотрим следующее главное св-во items, данное св-во отвечает за дочерние эл-ты нашего компонента, оно есть в 90% всех компонентов ExtJS.
items'у передается массив с объектами наших компонентов! В нашем случае два эл-та (панели)
Каждый компонент (объект), в нашем случае панель, можно создать неявно, указав xtype : 'panel' ! Далее описываются св-ва нашего компонента
Где найти альтернативные названия наших компонентов? Нужно глянуть в верхнем блоке описания компонента http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel
В items можно передавать и обычные объекты, созданные выше, с помощью Ext.create('Ext.panel.Panel', {...
3) Св-во defaults отвечает за стандартные настройки, нашей панели, их можно перелпределить внутри каждого дочернего эл-та в items
если поставить св-во collapsible: true, то панелька будет прятаться при щелчке на кнопку...
если поставить еще и св-во split: true, то панельку можно уменьшать или увеличивать, тянув за границу...
Самое главное это играться со св-вами, которые нам предоставляют, смотрите API и просто пробуйте,не забываем смотреть в консольку (при ошибках)
теперь расмотрим создания кнопок, компонент Ext.button.Button, xtype: 'button', добавим её в нижнию часть нашей панельки св-вом bbar,
чтобы добавить в верхнию часть используем tbar
var panel = Ext.create('Ext.panel.Panel', {
title : 'Моя панель',
width : 600,
height: 300,
renderTo : 'test',
layout : 'border',
defaults : {
padding: '3'
},
items : [{
xtype : 'panel',
region: 'west',
title : 'Вложенная первая',
html : 'контент контент контент ',
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
},{
xtype : 'panel',
region: 'center',
title : 'Вложенная вторая',
html : 'контент контент контент ',
bbar: [
{ xtype: 'button', text: 'Button 2' },
{ xtype: 'button', text: 'Button 3' }
],
lbar: [
{ xtype: 'button', text: 'Button 4' }
]
}]
});
1) Св-во tbar,bbar,lbar,rbar отвечает за расположение дополнительных плюшек: менюшек, выпадающих списков, кнопок и др.
Кнопку можно создать и простым способом:
var button = Ext.create('Ext.button.Button', {
text: 'Моя кнопка'
});
и передать в нашу панельку
...
lbar: [
button
]
...
Чтобы повесить событие на кнопку, нужно воспользоваться св-вом handler
var button = Ext.create('Ext.button.Button', {
text: 'Моя кнопка',
handler : function (){
Ext.Msg.alert('Внимания','Нажата кнопка');
}
});
Данное св-во как я и говорил выше применимо и к виду с xtype
...
lbar: [
{
xtype: 'button',
text: 'Button 4',
handler : function (){
Ext.Msg.alert('Внимания','Нажата кнопка');
}
}
]
...
ЗАПОМНИТЕ, сокращенный вид НИЧЕМ НЕ ХУЖЕ стандартного создания компонентов. Кому как нравится.
А теперь поработаем с табами, и формами
Для того чтобы создать таб панель можно воспользоваться сокращенным способом xtype: tabpanel, или стандартным Ext.tab.Panel.
Расширим наше пространство для работы, создав еще один регион, и увеличив саму панель (главную), полный код:
var panel = Ext.create('Ext.panel.Panel', {
title : 'Моя панель',
width : 900,
height: 600,
renderTo : 'test',
layout : 'border',
defaults : {
padding: '3'
},
items : [{
xtype : 'panel',
region: 'west',
title : 'Вложенная первая',
html : 'контент контент контент ',
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
},{
xtype : 'panel',
region: 'center',
title : 'Вложенная вторая',
html : 'контент контент контент ',
bbar: [
{ xtype: 'button', text: 'Button 2' },
{ xtype: 'button', text: 'Button 3' }
],
lbar: [
button
]
},{
xtype : 'tabpanel',
region: 'south',
height: 200,
title : 'Таб панель',
items : [{
title : 'Первая вкладка',
html : 'Контент первой вкладки'
},{
title : 'Вторая вкладка',
html : 'Контент второй вкладки'
}]
}]
});
Мы добавили еще один объект (компонент) в конец items нашей панели, и дав ему регион south, т.е прибить к низу панели.
Дали нашему объекту xtype : 'tabpanel' и остальные настройки. Вкладки в нашей таб панели перечисляются внутри всеми любимым св-вом items.
Указывается св-во title - название вкладки и остальные св-ва... Каждая вкладка тоже имеет св-во items, в него можно так же класть панели,
кнопки, еще табы и многое другое...
Чтобы сразу выделить нужную там панель указывается св-во activeTab: 1, 1 (единичка) указывает на то, что надо открыть при загрузке табов,
второй по счет таб, вспоминаем как идет счет эл-тов в массиве.
Так же таб можно загружать динамически использую AJAX. Пример:
Добавим третью вкладку в items
...
title : 'Таб панель',
items : [{
title : 'Первая вкладка',
html : 'Контент первой вкладки'
},{
title : 'Вторая вкладка',
html : 'Контент второй вкладки'
},{
title : 'Ajax вкладка',
loader: {
url: '/test_ajax.php',
contentType: 'html',
params: {
id : 12313,
text : 'tetststs'
},
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}]
...
1) св-во loader отвечает за загрузку, в нем указывается адрес, параметры и доп. параметры
2) На вкладке можно повесить событие, с помощью listeners. События КАЖДОГО КОМПОНЕНТА В ExtJS надо смотреть в API вкладка events (см. сайт)
3)
activate: function(tab) {
tab.loader.load();
}
здесь мы говорим, возьми на таб tab и загрузи то, что хотели...Так же можно обойтись и без этого, указав просто в loader'е св-во autoLoad: true,
Теперь поговорим о формах Ext.form.Panel, xtype: form
Формы в ExtJS это те же панели только типа form. Каждый компонент формы, а точнее текстовые поля, чекбоксы и др. можно создать и просто так,
и работать с ними, но если мы делаем нормальную форму из 5ти например полей, мы же не хотим по отдельности ловить наши компоненты (текстовые поля)
и обрабатывать их, мы хотим просто отправить форму на сервер...Вот для этого и используется форма. Рассмотрим на примере:
Изменим немного нашу главную панель, заменив блок
{
xtype : 'panel',
region: 'center',
title : 'Вложенная вторая',
html : 'контент контент контент ',
bbar: [
{ xtype: 'button', text: 'Button 2' },
{ xtype: 'button', text: 'Button 3' }
],
lbar: [
button
]
}
на переменную myForm, сейчас мы её создадим.
var myForm = Ext.create('Ext.form.Panel', {
id: 'idForm',
region: 'center',
title: 'Тестовая форма',
fieldDefaults: {
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
bodyPadding: '5 5 0',
items: [{
fieldLabel: 'Имя',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'Дата',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Сколько лет',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Время',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}],
buttons: [buttonForm]
});
1) Создаем форму как помним с помощью Ext.create('Ext.form.Panel', {}); Можно и не явно создать, с помошью xtype, но будет слишком загроможденный код.
2) В св-ве defaults мы указываем anchor: '100%' для того, чтобы наши инпуты растягивались во всю ширину
3) defaultType: 'textfield', указывает, какой стандартный тип полей использовать, при создании в items. Это нужно для того,
чтобы всё время не прописывать в items xtype: 'textfield'. Не забываем, что и все эти поля можно создать с помощью Ext.create('Ext.form.field.Text', {});
и передать просто переменную в items.
4)bodyPadding - делаем отступы от внутренней части панели.
5) Создаем кнопку buttons: [buttonForm], можно сразу несколько, как видим тут массив. Мы вынесли для удобства, чтобы потом сделать отправку формы на сервер.
Код buttonForm ниже:
var buttonForm = Ext.create('Ext.button.Button', {
text: 'Отправить',
handler : function (){
Ext.Msg.alert('Внимания','Нажата кнопка buttonForm');
}
});
6) У каждого поля, можно указать св-во allowBlank: false, оно нужно для того, чтобы проверять валидность на пустоту. Пригодится в дальнейшем
А теперь добавим texarea со стандартным текстовым редактором, ниже всех элементов items добавляем
{
xtype: 'htmleditor',
name: 'text',
fieldLabel: 'Текст'
}
Полный код нашего файла прикреплю в конце.
Ну а теперь давайте отправим нашу форму на сервер. Изменим нашу кнопку buttonForm
var buttonForm = Ext.create('Ext.button.Button', {
text: 'Отправить',
handler : function (){
var form = Ext.getCmp('idForm').getForm();
if(form.isValid()){
form.submit({
waitMsg:'Идет отправка...',
url: '/test_ajax.php',
params : {key : 'val', key2 : 'val2'},
success: function(form,response) {
Ext.Msg.alert('Внимание','Успешно отправлено');
console.log(response.result);
},
failure : function(){
Ext.Msg.alert('Внимание','Какая то ошибка');
}
});
}else{
Ext.Msg.alert('Внимание','Заполните ВСЕ поля');
}
}
});
1) var form = Ext.getCmp('idForm').getForm(); - тут мы получаем наш компонент с ID idForm, далее мы получаем форму
2) проверяем валидность form.isValid()
3) При вызове метода submit из нашего компонента form, мы отправляем нашу форму по адресу url, с дополнительными параметрами params,
на ваше усмотрение.
4) Так же ставим обработчики на запрос, для отслеживания статуса. success - выполняется тогда, когда ошибок нет и САМОЕ ГЛАВНОЕ в ответе есть success true
Как надо оформлять ответ, в 6 пункте
5) failure вызывается тогда, когда success false, или произошла ошибка на сервере (статус не 200)
6) код обработчика
<?php
echo json_encode(array('success'=>true,'content'=>$_POST));
7) в параметр response функции success придет ответ с сервера, а точнее в response.result, уже в декодированном виде, в виде объекта.
Весь код
Свернутый текст
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext', '/assets/js/extjs');
Ext.require([
'Ext.Msg',
'Ext.panel.*',
'Ext.button.*',
'Ext.form.*'
]);
Ext.onReady(function(){
var button = Ext.create('Ext.button.Button', {
text: 'Моя кнопка',
handler : function (){
Ext.Msg.alert('Внимания','Нажата кнопка');
}
});
var buttonForm = Ext.create('Ext.button.Button', {
text: 'Отправить',
handler : function (){
var form = Ext.getCmp('idForm').getForm();
if(form.isValid()){
form.submit({
waitMsg:'Идет отправка...',
url: '/test_ajax.php',
params : {key : 'val', key2 : 'val2'},
success: function(form,response) {
Ext.Msg.alert('Внимание','Успешно отправлено');
console.log(response.result);
},
failure : function(){
Ext.Msg.alert('Внимание','Какая то ошибка');
}
});
}else{
Ext.Msg.alert('Внимание','Заполните ВСЕ поля');
}
}
});
var myForm = Ext.create('Ext.form.Panel', {
id: 'idForm',
region: 'center',
title: 'Тестовая форма',
fieldDefaults: {
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
bodyPadding: '5 5 0',
items: [{
fieldLabel: 'Имя',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'Дата',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Сколько лет',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Время',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
},{
xtype: 'htmleditor',
name: 'text',
fieldLabel: 'Текст'
}],
buttons: [buttonForm]
});
var panel = Ext.create('Ext.panel.Panel', {
title : 'Моя панель',
width : 900,
height: 600,
renderTo : 'test',
layout : 'border',
defaults : {
padding: '3'
},
items : [{
xtype : 'panel',
region: 'west',
title : 'Вложенная первая',
html : 'контент контент контент ',
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
},myForm,{
xtype : 'tabpanel',
region: 'south',
height: 200,
title : 'Таб панель',
items : [{
title : 'Первая вкладка',
html : 'Контент первой вкладки'
},{
title : 'Вторая вкладка',
html : 'Контент второй вкладки'
},{
title : 'Ajax вкладка',
loader: {
url: '/test_ajax.php',
contentType: 'html',
params: {
id : 12313,
text : 'tetststs'
},
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}]
}]
});
});
На этом пока что всё...Есть еще очень много интересного в ExtJS но сразу не опишешь :)
Спрашивайте, отвечу на вопросы, которые осилю) Сам еще не профи в ExtJS.