Полный комплект среды разработки ExtJS SDK поставляется с документацией, набором рабочих примеров, ресурсами библиотеки (картинки, файлы стилей CSS, темы) и дополнительными адаптерами для работы со сторонними библиотеками, а также полными исходными кодами самого проекта (с комментариями) и несколько вариантов файлов для использования в работе:

• ext-all.css – сжатая версия всех CSS файлов со стилями

• ext-all.js – сжатая версия всех компонентов библиотеки

• ext-all-debug.js – все компоненты библиотеки без комментариев (код доступен для просмотра и отладки)

• ext-core.js – сжатая версия ядра библиотеки

• ext-core-debug.js – основные компоненты без комментариев (код доступен для просмотра и отладки)

Файлы стилей, используемые в библиотеке ExtJS, расположены в следующих подкаталогах:

Каталог images содержит подкаталоги с элементами тем оформления для визуальных компонентов Ext JS. Создание новой темы напоминает создание нового файла со стилями CSS (в каталоге CSS). Если необходимо, чтобы существующие изображения были перекрыты, создайте новый подкаталог в каталоге images и поместите в него новые изображения. К сожалению, процесс создания собственных тем оформления выходит за рамки этой книги, однако вы можете воспользоваться темой “gray” из Ext JS SDK в качестве учебного примера.

В поставку SDK входит файл INCLUDE_ORDER.txt, описывающий какие из файлов должны быть подключены к вашему проекту, в зависимости от выбранного для работы адаптера. Для примера, если мы будем использовать стандартное ядро библиотеки, то должны подключить три файла:

<link type="text/css" rel="stylesheet" href="css/ext-all.css" />

<script type="text/javascript" src="scripts/ext-base.js"></script>

<script type="text/javascript" src="scripts/ext-all.js"></script>

Эти три строчки достаточно для работы всех компонентов ExtJS, однако в процессе изучения библиотеки мы рассмотрим некоторые дополнительные аспекты ее работы.

Соглашения об именах

При создании библиотеки ExtJS был выработан определенный стиль кодирования и соглашения об именах объектов. Это позволяет разработчику довольно просто начать ее изучение. Давайте рассмотрим основные из них:

• Имена классов начинаются с заглавных букв (GridPanel, Observable и так далее).

• Имена событий состоят из строчных букв (click, dblclick и так далее).

• Контанты полностью указаны в верхнем регистре (DAY, HOUR и так далее).

• Все прочие идентификаторы имеют смешанный регистр (ext, doSomething, myValue и так далее).

Если вы взглянете на исходный код ExtJS, то заметите следующие особенности:

• Открывающие фигурные скобки указываются в конце строки.

• Блоки кода указываются явно.

if (condition) code(); // не приветствуется

if (condition) { // предпочтительный вариант
  code();
}

Продолжение следует...

Перейти к содержанию Учебника по ExtJS

Мы помогли Вам? Вы можете поддержать дальнейшее создание учебника по ExtJS.

Как ранее упоминалось при рассмотрении компонента панель - это контейнер для других визуальных компонентов. Пробуем продемонстрировать это, создав две простые панели, одна из которых будет привязываться к окну браузера, а другая пока не будет отображаться:

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели'
});

panel2 = new Ext.Panel({
  title: 'Внутреняя панель',
  collapsible: true,
  html: 'Содержимое внутренней панели'
});

По пути мы осваиваем еще одно свойство конфигурации панели - collapsible, которое определяет, отрисовывать или нет (true или false) кнопку сворачивания панели в ее заголовке. Для некоторых применений это удобный метод организации информации на экране для сайтов, позволяющих пользователям самим выбирать отображение только актуальных для них данных. Дополнительно с помощью другого свойства titleCollapse можно задать сворачиваемость панели по щелку на ее заголовке.

Далее выполним две магические команды:

panel1.add(panel2)
panel1.doLayout()

Первая выполняет метод add панели-контейнера, добавляя в нее дочерние компоненты (в данном случае дочернюю панель). Обратите внимание, что если бы мы имели несколько панелей, их можно было подключить к родительской за один раз, передав их в параметрах метода add: panel1.add(panel2, panel3, panel4...)

Вторая команда сообщает системе отрисовки компонентов выполнить рендер вновь добавленных элементов:

Существует обратное действие - удаление дочернего компонента из панели:

panel1.remove(panel2)

В этом случае после него вызывать doLayout() не требуется, так как основная панель будет перерисована автоматически.

Метод add замечателен тем, что кроме нового дочернего объекта в параметрах может также принимать только саму конфигурацию дочернего объекта и, основываясь на этих данных, динамически создавать новый компонент. Такой подход называется ленивым определением.

Для того чтобы точно знать, какой в этом случае тип компонента создается, необходимо передать в его конфигурации дополнительный параметр xtype. Считайте его внутренним идентификатором определенного вида компонентов. Для ранее рассмотренных нами Panel и Button значениями xtype соответственно являются 'panel' и 'button'. Список всех доступных значений xtype можно получить в Приложении А.

В следующем примере мы добавим к внешней панели еще одну дочернюю, задав ее с помощью ленивого определения:

panel1.add({
  xtype: 'panel',
  title: 'Ленивая панель',
  collapsible: true,
  html: 'Содержимое ленивой панели'});
panel1.doLayout()

Выше мы рассмотрели динамическое добавление дочерних элементов к панели, но том случае, если на этапе создания базовой панели уже известны ее составляющие, можно все компоненты указать в параметре items

Обычное определение:

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели',
  items: [
   {
      new Ext.Panel({
        title: 'Внутреняя панель',
        collapsible: true,
        html: 'Содержимое внутренней панели'
      })
   }
  ]
});

Ленивое определение:

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели',
  items: [
   {
     xtype: 'panel',
     title: 'Внутреняя панель',
     collapsible: true,
     html: 'Содержимое внутренней панели'
   }
  ]
});

Обратите внимание, что в свойстве items мы использовали индексный массив, который позволяет задавать сразу несколько дочерних элементов. При определении только одного элемента для удобства квадратные скобки можно опустить.

Использовать ленивое определение компонентов рекомендуется во всех случаях, когда это возможно. Во-первых, уменьшается количество операций по отрисовке компонентов, позволяя провести их за один раз - при создании родительского. Во-вторых, это гарантирует потребление меньших объемов памяти и системных ресурсов из-за сокращения числа используемых объектов. Кроме того, если родительская панель вообще не будет отображена (например, находится на другом табе, который пользователь не нажмет при просмотре страницы), дочерние элементы так и не будут созданы, а следовательно на эти операции не будут потрачены ресурсы.

Продемонстрируем как свойство items может содержать несколько элементов разных типов:

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели',
  items: [
   {
     xtype: 'panel',
     title: 'Внутреняя панель',
     collapsible: true,
     html: 'Содержимое внутренней панели'
   }, {
     xtype: 'button',
     text: 'Кнопка 1',
   }, {
     xtype: 'button',
     text: 'Кнопка 2',
   }
  ]
});

Неуказание xtype при ленивом определении компонента не является ошибкой: библиотека воспользуется типом компонента по-умолчанию (в случае панели и большинства других визуальных компонентов их дочерние элементы также будут панелями). Если вы хотите изменить тип дочерних элементов по-умолчанию, воспользуйтесь свойством конфигурации defaultType.

Удалять дочерние элементы, указанные в случае ленивого определения, можно через определение их идентификаторов (id):

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели',
  items: [
   {
     xtype: 'panel',
     id: 'panel2',
     title: 'Внутреняя панель',
     collapsible: true,
     html: 'Содержимое внутренней панели'
   }
  ]
});
panel1.remove(Ext.getCmp('panel2'));

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

Существуют так называемые плавающие панели, которые имеют четко заданные координаты относительно страницы документа. В этом случае необходимо определить размеры компонента (свойства width и height в конфигурации), признак плавающей панели (свойство floating = true), после чего задать ее абсолютные координаты методом setPosition(X, Y):

panel = new Ext.Panel({
  title: 'Плавающая панель',
  floating: true,
  width: 300,
  height: 150,
  renderTo: Ext.getBody(),
  html: 'Какое-то важное сообщение'
});
panel.setPosition(100, 200);

По умолчанию у плавающей панели отрисовывается тень, которая визуально как бы приподнимает ее над другими элементами документа. Необходимость отрисовки тени и способ определяется свойством конфигурации shadow.

Панели могут быть довольно сложными и содержать кроме дочерних элементов верхний и нижний тулбар и нижние внешние кнопки:

new Ext.Panel({
 title: 'Сложная панель',
 renderTo: Ext.getBody(),
 html: 'HTML-код',
 tbar: [
   { text: 'Верхняя кнопка 1' },
   { text: 'Верхняя кнопка 2' }
  ],
 bbar: [
   { text: 'Нижняя кнопка 1' },
   { text: 'Нижняя кнопка 2' }
  ],
 buttons: [
     { text: 'Кнопка 1' },
     { text: 'Кнопка 2' }
   ],
 items: [
    { title: 'Панель 1', html: 'Панель 1' },
    { title: 'Панель 2', html: 'Панель 2' }
  ]
})

Что еще можно делать с панелями?

1. Панель может иметь заголовок (свойство title в конфигурации), а может не иметь его. В этом случае компонент становится обычным контейнером других компонентов.
2. Конечные размеры панели как и многих визуальных компонентов задаются свойствами height и width в конфигурации (либо auto по-умолчанию, либо числовые значения в пискелах)
3. С помощью свойства autoLoad можно задать URL, с которого будет выполняться загрузка тела панели с помощью внутреннего AJAX запроса. Точно такое же действие можно выполнить в любой момент после создания панели с помощью метода load. Существует ограничение, связанное с системой безопасности браузеров, которое не позволяет использовать разные серверы для основной страницы и запроса к подгружаемому содержимому.
4. Если содержимое тела панели не вмещается в заданную область, можно задать автоматическую активацию полос прокрутки при необходимости (свойство autoScroll в конфигурации компонента).
5. Можно управлять отображением рамок панели (свойства bodyBorder, border, hideBorders и frame в конфигурации компонента).
6. Выравнивание кнопок панели может быть правым (по-умолчанию), левым или по центру (свойство buttonAlign в конфигурации компонента).
7. Панель при начальном отображении на эране может быть в уже свернутом режиме (свойство collapsed в конфигурации компонента)

Продолжение следует...

Перейти к содержанию Учебника по ExtJS

Мы помогли Вам? Вы можете поддержать дальнейшее создание учебника по ExtJS.

Один из самых простых компонентов библиотеки - кнопка (Button), создается тривиально:

button = new Ext.Button({
 text: 'Кнопка',
 renderTo: Ext.getBody()
})

Что обычно требуется от кнопки? Правильно: реагировать на нажатия. Давайте определим специальную функцию ShowMessage(), которая будет выдавать простое сообщение пользователю о нажатии на кнопку:

function ShowMessage() {
  Ext.MessageBox.alert("На меня нажали!", "Сообщение");
}

Присвоим ранее созданной кнопке эту функцию-обработчик.

button.setHandler(ShowMessage)

Обратите внимание, что многие начинающие разработчики в этом месте создают ошибку: указывают имя функции со скобками ShowMessage() вместо ссылки на нее как на объект ShowMessage, что приводит к вызову функции, а потом передаче в качестве параметра возвращенного ей результата, что неверно.

Щелкаем по кнопке - получаем сообщение:

Функцию-обработчик можно задавать напрямую в конфигурации компонента как анонимную функцию:

button = new Ext.Button({
  text: 'Кнопка',
  renderTo: Ext.getBody(),
  handler: function() { Ext.MessageBox.alert("На меня нажали!", "Сообщение"); }
})

Для удобства нескольким кнопкам можно присваивать один обработчик. Обратимся к новому примеру:

function ButtonClick() {
  Ext.MessageBox.alert("На меня нажали!", "Сообщение");
}

for (i=1;i<=10;i++) {
  new Ext.Button({
    text: 'Кнопка номер '+i,
    renderTo: Ext.getBody(),
    handler: ButtonClick,
    id: 'button_'+i
 })
}

Теперь при нажатии на любую из созданных в цикле десяти кнопок будет запускаться одна и та же функция:

Обратите внимание, что на этот раз мы не сохраняем созданный в результате вызова конструктора кнопки объект, а задаем в его конфигурации параметр id вида button_N, где N - порядковый номер кнопки. В дальнейшем зная идентификатор компонента можно получить его объект конструкцией:

Ext.getCmp('button_N')

Следующий цикл выполняет перебор ранее созданных кнопок и их переименование:

for (i=1;i<=10;i++) {
  Ext.getCmp('button_'+i).setText('Кнопочка '+i)
}

Интересно, а можно с помощью всего лишь одной функции-обработчика сделать привязку к нажатой кнопке? Переопределим функцию-обработчик, добавив ей два параметра: button (объект кнопки, которая была нажата) и e (тип полученного обработчиком события):

function ButtonClick(button, e) {
  Ext.MessageBox.prompt("Изменить?", "Введите новое название кнопки", function(btn, text) {
  if (btn == 'ok') {
   button.setText(text)
  }
 })
}

К сожалению, простого переопределения функции в Firebug с таким же именем для привязки к ранее созданным кнопкам недостаточно. Снова переберем существующие кнопки и присвоим новый обработчик:

for (i=1; i<=10; i++) {
 Ext.getCmp('button_'+i).setHandler(ButtonClick)
}

Проверяем: кнопки переименовываются!

В обычном HTML кнопка задается подобными тегами:

<input type="submit" id="btnLaunch" value="Lancer" name="btnLaunch"/>

А что представляет из себя компонент-кнопка из библиотеки ExtJS в DOM-документе? Вы будете смеяться, но это таблица с декоративными элементами и тегом <button>:

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon"
 id="ext-comp-1169" style="width: auto;">
  <tbody><tr>
   <td class="x-btn-left"><i> </i></td>
   <td class="x-btn-center"><em unselectable="on">
   <button type="button" class="x-btn-text" id="ext-gen138" style="background-image: url(/img/settings.gif);">
   Profile</button></em></td><td class="x-btn-right"><i> </i>
   </td></tr>
  </tbody>
</table>

Внутренняя структура одной из наших кнопок в Firebug:

Давайте посмотрим, как можно управлять положением кнопок с помощью изменения свойств их DOM-элементов.

function getBrowserHeight() {
  return document.compatMode=='CSS1Compat' && !window.opera?
    document.documentElement.clientHeight:document.body.clientHeight;
}

function getBrowserWidth() {
  return document.compatMode=='CSS1Compat' && !window.opera?
   document.documentElement.clientWidth:document.body.clientWidth;
} 

for (i=1;i<=10;i++) {
  dom = Ext.getCmp('button_'+i).el.dom;
  dom.style.position="absolute";
  dom.style.marginLeft=Math.round(Math.random()*(getBrowserWidth()-dom.clientWidth));
  dom.style.marginTop=Math.round(Math.random()*(getBrowserHeight()-dom.clientHeight));
}

Выше мы определили две кроссбраузерные функции getBrowserHeight() и getBrowserWidth(), которые будут оценивать доступную область экрана (соответственно высоту и ширину) браузера в пикселах. Далее в процессе цикла перебираем все кнопки и присваиваем им абсолютные координаты, сгенерировав их из случайных значений. Обратите внимание, что мы подсчитываем метрику окна браузера, вычитаем из этого значения метрику кнопки (чтобы не появлялись полосы прокрутки) и на основании полученной величины присваиваем верхней или левой координате DOM-элемента кнопки случайное значение из этого диапазона:

Теперь немного позабавимся: сделаем так, что кнопки заживут своей жизнью. Давайте представим, что каждая кнопка будет двигаться в собственном направлении, которое определяется двумя переменными кнопки moveX и moveY, имеющими значения -1 (для сдвига против оси), 0 (без изменения по оси) и 1 (для сдвига по оси). Для удобства зададим функцию-генератор этих значений:

function getDirection() {
 return Math.round(Math.random()*2)-1;
}

Задаем первоначальные направления движения кнопкам:

for (i=1;i<=10;i++) {
  Ext.getCmp('button_'+i).moveX = getDirection();
  Ext.getCmp('button_'+i).moveY = getDirection();
}

А теперь реализуем функцию crazy(), которая будет осуществлять движение:

function crazy() {
  for (i=1;i<=10;i++) {
    comp = Ext.getCmp('button_'+i)
    X = parseInt(comp.el.dom.style.marginLeft);
    X += comp.moveX;
    if ((X == 0) || (X == (getBrowserWidth()-comp.el.dom.clientWidth))) {
      comp.moveX = invertDirection(comp.moveX);
    }
    comp.el.dom.style.marginLeft = X;
    Y = parseInt(comp.el.dom.style.marginTop);
    Y += comp.moveY;
    if ((Y == 0) || (Y == (getBrowserHeight()-comp.el.dom.clientHeight))) {
      comp.moveY = invertDirection(comp.moveY);
    }
    comp.el.dom.style.marginTop = Y;
  }
}

function invertDirection(dir) {
  if (dir == -1) { return 1; }
  if (dir == 1) { return -1; }
  return 0;
}

Выше мы определили функцию crazy, которая высчитывает изменения координат кнопок, а при достижении границ экрана меняет направление движения на обратное с помощью вспомогательной функции invertDirection.

Запускаем в работу:

setInterval("crazy()", 100)

Заметьте, что во время отображения всплывающего окна с сообщением при нажатии любой кнопки, их движение продолжается несмотря на то, что выводится модальный диалог.

Что еще можно делать с кнопками?

1. С помощью метода focus() определенной кнопке можно передать фокус ввода.
2. К кнопке можно привязать выпадающее меню (свойство menu конфигурации компонента и его методы showMenu и hideMenu)
3. Кнопка может работать в режиме переключателя (свойства enableToggle, pressed, toggleHandler и toggleGroup в конфигурации и свойство объекта toggle)
4. Кнопку можно заблокировать (свойство disabled в конфигурации)
5. К кнопке можно добавить изображение-иконку (свойство icon в конфигурации и его метод setIconClass)
6. К кнопке можно добавить всплывающую подсказку (свойства tooltip и tooltipType в конфигурации)

Перейти далее к разделу Расширенная работа с панелями…

Перейти к содержанию Учебника по ExtJS

Мы помогли Вам? Вы можете поддержать дальнейшее создание учебника по ExtJS.

Dobbiamo Assume che abbiate presente cosa sia un pastebin e passo direttamente al sodo.

Extjs ci permette di concentrare su una singola pagina web un'intero applicativo semplificando, per certi versi, lo sviluppo.

Vediamo come è composta la pagina web che ospiterà il nostro codice:

<html>
<head>
<title>PastE(xtjs)bin</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="pastebin.css">
</head>
<body>
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all-debug.js"></script>
<script type="text/javascript" src="pastebin.js"></script>
</body>
</html>

Se pensate che la pagina sia scarna non avete tutti i torti. Solitamente si usa costruire la pagina in html e poi aggiungere la logica in javascript per poter garantire l'accesso anche a chi non ha javascript abilitato. Noi abbiamo due motivi che ci spingono a massimizzare l'uso di javascript: stiamo sviluppando un'applicativo di prova e vogliamo evitare per quanto possibile l'abuso da parte di spider della possibilità di incollare testi non controllati.

Le righe in rosso servono ad includere tutti i file della libreria. Potremmo scegliere di includere meno codice di quello che abbiamo incluso adesso scegliendo di non fare riferimento a ext-all-debug ma ad un file, magari assemblato ad hoc o compresso.

Il file javascript evidenziato in blu conterrà la logica del nostro programma mentre il file pastebin.css a cui facciamo riferimento nella sezione head del file conterrà la parte personalizzata dello stile dell'applicazione.

Per ora conterrà solamente lo stile del tag body, aggiungeremo eventualmente più avanti altri stili.

body {
background-color: #fdfffa;
background-image: url(ext-2.2/resources/images/default/shared/large-loading.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

In attesa che vengano caricati i file javascript, sono grossi e potrebbe essere necessario diverso tempo per scaricarli, verrà visualizzata un'immagine al centro della pagina che invita gli utenti ad attendere.

Abbiamo descritto sinteticamente la parte html e css, possiamo dedicarci alla parte javascript.

Per ora ci limiteremo a creare una prima separazione della pagina che conterrà l'applicativo utilizzando l'oggetto viewport.

Questo componente è, riporto dalle specifiche, un contenitore che sostituisce il contenuto del tag body, occupa tutto lo spazio disponibile nella finestra del browser ed ospita diversi pannelli che permetteranno di strutturare lo spazio visibile contenendo, a loro volta, i controlli necessari all'interazione con l'utente.

Se avete superato il paragrafo precedente e siete arrivati fin qui per cercare di capire cosa c'è scritto sappiate che anche a me che l'ho scritto il testo non è chiaro. Un esempio è quello che ci vuole per fugare eventuali dubbi residui. Il codice javascript che animerà la nostra applicazione per ora sarà molto semplice:

Ext.onReady(function(){    Ext.namespace("eineki");   
                           new Ext.Viewport({   
                               layout: "border",   
                               items: [  {  region: "west",        
                                            collapsible: true,        
                                            title: "Utente",        
                                            html: "Contenuto del pannello a sinistra",
                                            height: "90%",
                                            margins:"2 2 2 2"},     
                                         {  region: "center",        
                                            html: "Contenuto del pannello al centro",
                                            margins:"2 2 2 2"}   
                               ]  
                             });
  });

Per ora ci limitiamo ad dividere la finestra in due parti, riempiremo le due colonne in una prossima puntata. Viewport serve proprio a questo: divide la finestra del browser in cinque zone che secondo uno lo schema che vedrete qui sotto nello screenshot.

Potete vedere la demo (parola grossa) funzionante ed il sorgente per crearla, magari con i numeri di linea.

Ogni volta che programmeremo usando Extjs raccoglieremo il codice principale all'interno di una funzione, in questo caso anonima anche se non è obbligatorio che lo sia, che dovrà essere eseguita all'interno di una chiamata ad Ext.onReady (riga 4) che accetta come parametro una funzione da lanciare una volta che il browser ha caricato tutto il necessario alla renderizzazione della pagina.

Nello specifico la nosta funzione non fa altro che utilizzare viewport per dividere la pagina in due colonne, una occidentale, o sinistra (west) ed una destra, anche se per viewport sarà la regione centrale (center).

Viewport divide la finestra in cinque regioni: north, west, center, east e south che dovranno essere riempite da opportuni panel (o renderizzate su div già presenti sulla pagina). Solo una delle regioni è obbligatoria: center, le altre, essendo facoltative, possono essere impiegate per costruire un qualunque layout. A dire il vero anche viewport è del tutto facoltativo; è possibile sviluppare applicazioni senza utilizzarlo e gestire la pagina direttamente.

Nel prossimo pezzo cercherò di concentrarmi sui panel popolando, nel contempo la regione di sinistra con una maschera per l'inserimento dei dati di un eventuale utente.

E questo, per ora, è tutto.

• stable, pure java (no js), portable library
• ready, full featured and easy to use instant messaging implementation
• extensible architecture
• Chat rooms support (Multi-User Chat).
• Other XEP like: Chat State Notifications.
• well tested (junit test, coverage support)

Features :

• Common features support (chat, chat rooms, presence, roster)
• Sound and visual advices when new messages arrive
• Drag & Drop support to start a conversation and for chat room invitations
• i18n support
• Focused in be very usable
• Based in extjs and gwt-ext

Screenshot

emite Chat Demo - click here

emite Chat application download

Необходимые инструменты

Для запуска примера из этого раздела нам не потребуются специальные навороченные среды разработки (типа Eclipse), а будет достаточно современного браузера Firefox с дополнительным пакетом расширения Firebug.

Если Firefox еще не установлен на вашем компьютере, то пора скачать и установить его. После чего запустите Firefox и введите в адресной строке https://addons.mozilla.org/ru/firefox/search?q=Firebug. Откроется окно:

Щелкаем по кнопке Добавить в Firefox, расположенной справа от описания необходимого нам дополнения Firebug. Появится дополнительное окно, которое сообщит о намерении установки нового расширения:

Нажимаем кнопку Установить, после чего произойдет загрузка пакета и его установка в систему. Далее, потребуется выполнить перезапуск браузера для чего нужно щелкнуть по кнопке Перезапустить Firefox:

Нажимаем кнопку F12 и убеждаемся, что Firebug корректно установлен и активен. Если все прошло нормально, внизу окна появится дополнительная область с несколькими вкладками. Пока проверим, что эта панель отобразилась, а ее использование подробнее рассмотрим чуть позже.

Создание html файла

Начнем с создания HTML файла - каркаса нашего приложения, который будет загружать и инициализировать библиотеку ExtJS. Откроем любой текстовый редактор и скопируем простой HTML код:

<html>
 <head>
  <link href="http://extjs.com/deploy/dev/resources/css/ext-all.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js">
  </script>
  <script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js">
  </script>
 </head>
 <body>
 </body>
</html>

Вот что получилось:

Давайте рассмотрим этот файл подробнее. Сначала мы определяем стандартные HTML теги: начало документа <html> и начало заголовочной секции документа <head>. Далее по тексту расположены соответствующие им закрывающие теги: </html> и </head>. Таким образом основной код нашего документа сейчас сконцентрирован в секции <head>, а раздел, отделенный тегами <body>, в данный момент пока не имеет содержимого. Обратите внимание на один тег <link> и два <script>. Первый выполняет подключение внешнего файла по адресу http://extjs.com/deploy/dev/resources/css/ext-all.css, который содержит таблицы стилей CSS. Этот файл является частью библиотеки ExtJS и находится на сервере ее разработчиков. На данном этапе для удобства мы не будем копировать необходимые нам файлы на локальный компьютер, однако в дальнейшем рассмотрим и этот вопрос. Вторые два тега <script> выполняют подключение файлов с JavaScript кодом библиотеки (http://extjs.com/deploy/dev/adapter/ext/ext-base.js и http://extjs.com/deploy/dev/ext-all.js) и также находятся на сервере ее разработчиков. Первый файл является базовым загрузчиком, а второй содержит необходимые текущему приложению компоненты (в нашем случае all - все). Порядок подключения этих файл критичен: если теги поменять местами - библиотека работать не будет.

В дальнейшем для ускорения загрузки своих приложений, созданных с использованием ExtJS, можно провести кастомизацию компонентов и исключить неиспользуемые.

Работа с Firebug

Сохраняем файл где-нибудь на своем локальном компьютере под именем helloworld.html и открываем через меню Файл -> Открыть файл в Firefoxе:

Нажимаем кнопку F12 для вызова отладчика Firebug. В отобразившейся нижней панели мы увидим набор вкладок Console, HTML, CSS, Script, DOM, Net, часть из которых неактивна (подсвечена серым цветом). По-умолчанию это сделано для того, чтобы процесс отладки Firebug не замедлял работу браузера при просмотре обычных сайтов, и включался только для тех, где он необходим.

Обратите внимание, что во второй вкладке HTML, которая скорее всего будет активна при старте Firebug, отображается древовидная структура нашего HTML файла. Это так называемая DOM-модель HTML документа, каждый из узлов которой представляет собой отдельный элемент.

Мы вернемся к ней немного позже, а сейчас перейдем на вкладку Console:

Как уже и говорилось ранее, Firebug по-умолчанию не работает со всеми сайтами, поэтому требует для каждого отдельной активации. В нашем случае вместо сайта используется локальный файл, поэтому активировать Firebug будем для всех локальных документов. Первоначально нам потребуется только консоль отладчика, поэтому поставим галочку напротив Console и нажмем кнопку Enable selected panels for Local Files. В результате получим интерактивную консоль для построчной отладки программ на языке JavaScript:

В верхней ее области будет отображаться вывод результатов обработки команд, а в самой нижней (где расположено приветствие > > >) можно вводить сами команды. Как это принято в учебниках многих языков программирования и сред разработки, напишем код, который будет выводить на экран небольшое приветствие. Введем в нижней строке: Ext.MessageBox.alert("Привет мир!"):

После чего нажмем Enter, и на экране отобразится симпатичное окошко:

Попробуйте его переместить в другую область окна. Неправда ли, оно ведет себя схожим образом с обычным окном с сообщением операционной системы за исключением того, что его нельзя переместить за пределы окна браузера?

Обратите внимание на консоль Firebug: после исполнения команды в консоли отобразилась как сама команда, так ссылка на новый объект, который вернула функция alert (зеленым цветом). Давайте подробнее посмотрим на только что вызванную функцию:

• Ext - класс библиотеки ExtJS, содержащий все функции, свойства, классы и объекты доступные из библиотеки
• MessageBox - класс, содержащий функции и свойства для отображения сообщений подобных всплывающим сообщениям операционной системы
• alert - функция, вызываемая с одним или несколькими параметрами для выполнения вывода окна с сообщением

Вся команда звучит следующим образом (читаем справа налево): Вызвать функцию alert с параметром "Привет мир!" из объекта MessageBox, который в свою очередь находится в объекте Ext.

Набирать длинные команды в одной строке Firebug достаточно неудобно, поэтому следующим шагом щелкнем по самой нижней правой красной кнопке со значком ^ и переключимся в режим полноценного редактора:

Теперь мы сможем набирать команды в несколько строк и запускать их на выполнение нажатием комбинации Ctrl-Enter (в однострочном режиме просто Enter). Попробуем усложнить пример и напишем длинную команду для вывода сообщения с множественным выбором вариантов действий пользователя:

Ext.MessageBox.show({
 title: "Сохранить?",
 msg: "Имеются изменения",
 buttons: Ext.Msg.YESNOCANCEL,
 icon: Ext.Msg.QUESTION
})

Вот что у нас получилось при выполнении команды:

Рассмотрим подробнее: в этом случае вызывается функция show класса MessageBox с параметром, являющимся составным объектом (содержимое, заключенное в фигурные скобки). У этого объекта имеются четыре свойства: title, msg, buttons, icon. Несложно понять, что title и msg задают текстовое содержимое заголовка окна и самого сообщения, а buttons и icon указывают на параметры внешнего оформления. Вы наверное заметили, что здесь мы использовали краткую запись класса MessageBox - Msg, так как это удобнее для использования. Следующие варианты применения эквиваленты: Ext.MessageBox.alert("Тест") и Ext.Msg.alert("Тест")

Где можно взять допустимые значения параметров иконок, кнопок и прочего? Для нашего примера, в котором используется класс MessageBox мы перейдем на страницу документации библиотеки ExtJS и в дереве объектов последовательно выберем класс Ext, а затем MessageBox:

Мы попали на страницу описания класса MessageBox, где подробно указаны доступные функции, константы и принимаемые значения. Попробуйте поэкспериментировать с ними: например, изменить нашу последнюю команду, задав другой набор кнопок и иконку.

Перейти далее к разделу Панели...

Перейти к содержанию Учебника по ExtJS

Мы помогли Вам? Вы можете поддержать дальнейшее создание учебника по ExtJS.

Si tratterà di un appuntamento settimanale, almeno nelle mie più rosee previsioni, in controtempo con quello sugli ebook a licenza libera, e quindi pubblicherò un post alla settimana nella notte tra martedì e mercoledì, magari poche righe, quando il programma sarà in stallo, ma spero così di riuscire ad esprimere la difficoltà intrinseca all'uso della libreria.

Ovviamente ogni critica o suggerimento saranno più che accetti, anzi graditi.

Evitiamo di perdere altro tempo, anche se si tratta di un'introduzione bisogna che mantenga un piglio operativo, e cerchiamo di stabilire le specifiche del progetto.

Nulla di nuovo, ne trascendentale, vorrei finire il tutto prima del 2010 ;) , pensavo allo sviluppo di un server pastebin. Per farvi un'idea di cosa sia vi rimando alla definizione di pastebin su wikipedia e ad un esempio live.

In pochissime parole un service pastebin non fa altro che fornire una specie di bacheca condivisa su cui inserire, con il minimo indispensabile di formalità, brevi spezzoni di testo, di solito pezzi di codice, che possano essere visualizzati, copiati ed incollati.

In linea di massima un normale visitatore potrà visualizzare una lista di dei pezzi di testo inseriti e copiarne ed incollarne il contenuto. Un utente normale potrà inserire dei testi all'interno della banca dati determinandone, ad esempio, per quanto tempo l'appunto dovrà restare disponibile.

Per ora è tutto, si è fatto tardi e domattina bisogna che sia in grado di intendere e di volere visto che devo (almeno fare finta di) lavorare.

Il tutorial è focalizzato sulla modalità di estensione dell'oggetto Ext.Component, che sta alla base della gerarchia di classi del framework.

Al solito fatemi sapere come va la traduzione che è stata un po' faticosa, ve ne accorgerete perché alcuni periodi sono al limite tra una traduzione ed una reinterpretazione del testo :) .

Il testo è interessante anche perché punta ad altre risorse che vale la pena di studiare, e che, probabilmente tradurrò più avanti se nessun altro farà prima di me.

Ecco come ricavare tutti i contatti gmail di un account API google

However, what if you want to be fancier, and constrain it inside of some other container? It seems obvious, but finding the answer is difficult. People on the ExtJs forums have posted this question, but the responses are generally a step away from being the real answer.

The answer is the renderTo config property, which you should point to the body property of the container. The forum responses generally indicate this, but they fail to mention the body property. This is what works for panels, I haven't looked at all the other containers. But I have a feeling the concept would still apply.

[sourcecode language='javascript']
var myPanel = new Ext.Panel({
...
});
var testWin = new Ext.Window({
title: 'Test',
width: 300,
height: 300,
renderTo: myPanel.body,
constrain: true,
});
testWin.show();
[/sourcecode]

I previously searched and found that someone had wrapped up ExtJs into a JSF library, however it appeared to be a dead project.

A coworker and I instead decided to use Apache Shale to expose methods in a managed bean, to return the JSON data that ExtJs wanted. At the time, we were only using the ExtJs Tree component. We needed to use the ExtJs Tree instead of the one from RichFaces because of a certain requirement that could not be fulfilled with RichFaces.

In my previous project, we used JSF 1.2 + RichFaces. While I feel that combination can produce good results, it didn't feel very agile. On a new JSF project going forward, I would recommend Seam; however it is not worth the effort to retrofit a large project.

James Lorenzen has a post about how to roll your own ExtJs plugin for grails, which I will probably give a shot.

With JSF, we were pushing markup down to the browser using ajax polling & rerendering of components. However, I want to start using RESTful services along with Comet. This should get interesting...

Non vi ruberò molto tempo se non per scrivere che la seconda parte del tutorial o, meglio, questo secondo tutorial si addentra più in profondità in Extjs e spiega come risolvere, o almeno mitigare, il problema nell'assegnazione degli ambiti di risoluzione evidenziato nel primo.

Buona lettura.

Questa volta ho tradotto, come avevo preannunciato in un post precedente, il primo dei due tutorial che approfondiscono il concetto di scope.

Anche se basilare lo segnalo subito, invece di aspettare di finire di revisionare la seconda parte del tutorial, molto più utile per chi volesse utilizzare extjs, perché ha attirato la mia attenzione sul comportamento delle funzioni annidate riguardo gli ambiti di risoluzione dei nomi. Ho sempre creduto che javascript fosse un normalissimo linguaggio con scope statico mentre ho scoperto, seguendo questo tutorial, che sbagliavo e che la gestione delle funzioni annidate è al limite del comportamento errato (e qui chi ne sa di più è caldamente invitato a contraddirmi essere più preciso).

In attesa della fine della traduzione del secondo tutorial, Buona lettura

Per darvi un'idea riporto lo stringatissimo riassunto finale per punti.

• un evento è un messaggio inviato (fired) da una sorgente per informare eventuali gestori che è accaduto qualcosa.
• una sorgente di eventi è un oggetto che può generare eventi
• un gestore di eventi è una funzione che viene invocata quando una sorgente genera un evento del tipo gestito dal gestore
• ci mettiamo in attesa di un evento con la funzione on che installa un gestore di eventi
• per creare una sorgente di eventi estendiamo la classe Observable, addEvents e fireEvent

Dateci un'occhiata in attesa della prossima traduzione (gli scope, un doppio tutorial che mi pare interessante)

The first step is... integration (please note my avoidant personality which tend to ignore stuff like "how the f' should I code *anything* in Ext and jumps right into "ok, how should I display a grid ?"). This integration comes in two flavors - XML and JSON. From what I figure, an XML representation is larger (in terms of bytes) than a JSON representation so I tried to go the JSON way.

On the Spring side some there is a small lib called Spring JSON View which is basically a Spring view implementation. Long story short - it serializes JavaBeans to a JSON representation which is sent to the facade. Yes, of course it has more features, like form validation and stuff, but all in due time...

On the ExtJS side we have a JsonStore which is basically a DataStore encapsulating a proxy and a JsonReader. Here's where my stupidity kicked-in: the JSON generated by Spring looks something like
{"model":
{"products":
[{"productName":"Pretzels","skuNo":"1","productPrice":2.0},
{"productName":"Arrows","skuNo":"3","productPrice":4.0},
{"productName":"Nuclear warheads","skuNo":"2","productPrice":2.3}]
}
}
As an absolute n00b I wondered "Ok, which is the root of the store ? Is it "products" ? Is it "model" ? Is it "model.products" ? The latter was my logical choice but it didn't work. I wandered around forums and various blogs, I even wrote an override for the JSON reader, figuring that the problem is the root.

After spending a few hours on this I decided to ask the forums... Turns out that this specific line in the JsonStore was a bit... wrong:
fields:[{name:'productName',type:'string'},{name:'skuNo',type:'string'},name:'productPrice',type:'double'}]
Double is not an accepted type. I replaced it with "float" and everything worked like a charm

Never underestimate the power of your own stupidity...

I had no problems regarding the grid with ArrayReader but everything seemed to fall out of place when trying out the xml-grid.html example. The grid was set-up, alright... but the data is not loaded. It seemed that my xml-grid.html is not working.

I felt stuck...

I am using extjs 2.1 and the examples online runs out smoothly but those in my local computer seemed buggy... I searched and read on threads and blogs for online help but none seem to be figuring out exactly what is wrong, either that or I don't seem to get what is wrong in what I am doing, until I read these lines I missed in the Tutorial for Beginners in the Ext JS web site.

Note: This example will only run from a web server. The URL in your browser should start with http:// and not file:// or the Ajax transaction will not work! Localhost will work fine, but it must be via http.

This is the note under Using Ajax section. And then it seemed I hit the spot. I was not running my extjs examples inside my localhost server..

So... I guess that's it. One of those stupid things I got stuck on and phew! I managed to get by. One lesson learned: It is always good to start with tutorials than start learning on your own..

:D

Na barra lateral deste site estão alguns dos últimos posts do blog. Divirta-se !

DOCASU – Trac

Tags: extjs, alfresco

So I decided to look at it from a totally different angle - what is the first thing you think of when you want "desktop-like" functionality for your application ? Yes, unfortunately you're right - JavaScript. Now, I don't want to hear any of "JS is overhead", "JS slows down your browser"; yes, it does, but all "faces" also generates JS so STFU. Ok, maybe they generate LESS JavaScript but they also have... less features:). That's why I decided that ExtJS would make a good team with Spring. Of course there are many other JS frameworks out there but ExtJS just captured my attention. Yes, I know Dojo integrates better with Spring but i *really* hate Dojo.

All said and done, now I'm really trying to understand Spring. My past experience consists in coding some components for a Spring-based web application, but I didn't get the chance to "see" the whole picture so it's like learning to walk again. ExtJS is next and then some JSON because apparently that's the way you integrate ExtJS with Spring.

Wish me luck...

Se poi considerate che la frase - causa problemi di performance - è un eufemismo, vi lascio immaginare la mia strabordante contentezza.

Se le performance possono non essere un problema, potrete facilmente figurarvi il mio sconforto alla scoperta che anche l'esecuzione passo passo è inutilizzabile. Dopo qualche tentativo ed esplorazione tra i forum di supporto, le invettive dei diversi sviluppatori che si trovano davanti al problema (si, non sono solo) capisco, almeno credo di capire, che il problema è dovuto alle dimensioni dello script extJs.

Le 34343 linee di codice per la libreria sono troppe per firebug che, sul mio sistema non riesce a tracciare l'esecuzione quando quest'ultima arriva al file ext-all-debug.js.

Piuttosto che procedere alla cieca sperando di arrivare all'errore senza troppi blocchi, o almeno senza troppe pause troppo lunghe per la mia quasi infinita pazienza, ;) ho pensato di sezionare la libreria in più file.

L'espediente sembra funzionare e quindi non mi resta altro che riportare il piccolo script che seziona la libreria principale e sperare che la cosa possa essere di aiuto a qualcuno.

#!/bin/bash
# checksum md5 del file ext-all-debug.js
EXT21_MD5SUM='b854fc982dcec3781f1beb9653f33234'
MD5_PATH=`which md5sum`
INPUT_MD5=`$MD5_PATH $1  | cut -f 1 -d \ `

if [ "$2" = "" ]
then
    DIR='.'
else
    DIR=$2
fi

if [ "$EXT21_MD5SUM" = "$INPUT_MD5" ]
then
    head $1 --lines 2036 > $DIR/ext-all-debug-p01.js
    head $1 --lines 5679 | tail --lines 3643 > $DIR/ext-all-debug-p02.js
    head $1 --lines 8125 | tail --lines 2446 > $DIR/ext-all-debug-p03.js
    head $1 --lines 10897 | tail --lines 2771 > $DIR/ext-all-debug-p04.js
    head $1 --lines 13672 | tail --lines 2775 > $DIR/ext-all-debug-p05.js
    head $1 --lines 16309 | tail --lines 2636 > $DIR/ext-all-debug-p06.js
    head $1 --lines 19076 | tail --lines 2766 > $DIR/ext-all-debug-p07.js
    head $1 --lines 21817 | tail --lines 2741 > $DIR/ext-all-debug-p08.js
    head $1 --lines 24851 | tail --lines 3034 > $DIR/ext-all-debug-p09.js
    head $1 --lines 27420 | tail --lines 2569 > $DIR/ext-all-debug-p10.js
    head $1 --lines 31057 | tail --lines 3637 > $DIR/ext-all-debug-p11.js
    tail $1 --lines 3285 > $DIR/ext-all-debug-p12.js
else
    echo -e ' Questo script funziona solamente con la versione 2.1 di extjs\n' \
         'In particolare seziona il file ext-all-debug.js'
fi

Come primo parametro va il path della libreria, ext-all-degub.js, come secondo il path dove andare a salvare i vari spezzoni.

Includere i tag script corrispondenti, salare, mettere in forno e debuggare quanto basta. :)

A Feladat:

• PHP alapú nemzetközi portálrendszerek fejlesztése egy professzionális csapatban
• Meglévő rendszerek továbbfejlesztése, illetve kreatív új ötletek kidolgozása
   

Szakmai elvárások:

• Min. 3+ év fejlesztési tapasztalat
• Magas fokú PHP (5) ismeretek
• Erős és alapos SQL ismeretek (MySQL 5.x)
• Objektum Orientált programozási háttér (Java vagy C++) vagy OOP teljes körű ismerete
• Javascript és Javascript könyvtárakban szerzett tapasztalat (jQuery, prototype, ExtJS)
• SVN vagy CVS tapasztalat
• Nyílt forráskódú technológiák az alapos ismerete (PHP, MySQL, memcache)
• CSS és HTML részletes ismerete
• Kiváló csapatjátékos, specifikáció alapján önálló, koncentrált munkavégzés
• Junior fejlesztők munkájának koordinálása
• Jó szóbeli és írásbeli kommunikációs készség
• Megbízható, megfontolt személyiség
• Szakmai angol szöveg megértése
   

Előnyt jelent:

• Szakirányú végzettség, szakmai képzések
• PHP-s keretrendszer vagy keretrendszerek használatában szerzet tapasztalat
• Szoftverfejlesztésben szerzett tapasztalat (UML nem követelmény, de előny)
• Szakmai cikkek olvasása, szakmai tudás önállóan történő szinten tartása, fejlesztése
   

Amit kínálunk:

• A legmodernebb technológiák használata
• Fiatal, dinamikus csapat
• Szakmai támogatás és tudásbázis a munkavégzéshez
• Folyamatos fejlődés, kihívások
• Nemzetközi karrierlehetőség
• Kiemelkedő bérezés: Tapasztalattól és szakmai tudástól függően.
• Cafeteria rendszer, céges tréningek, szakmai utak
   

Munkaidő, helyszÍn:

• Modern, jól felszerelt iroda Budapest központjában
• Napi fix, nyolc órás munkaidő

laszlo_spiller@kellyservices.hu

Feladatok:

• Nagy látogatottságú, PHP alapú portálrendszerek, illetve közösségi oldalak fejlesztése egy professzionális csapat tagjaként

Szakmai elvárások:

• Szakirányú felsőfokú végzettség
• PHP tapasztalat
• Objektum-orientált fejlesztésbeli jártasság
• SQL ismeretek
• Szakmai angol szöveg megértése
• A feladattal, illetve a munkával kapcsolatban érzett szenvedély és igényesség
• Új technológiák megtanulására való hajlandóság 
   

Előnyt jelent:

• MySQL ismerete
• CSS és HTML ismerete
• JavaScript ismeretek, ezen belül kiemelten JQuery, illetve ExtJS használatában szerzett tapasztalat
• Verziókezelő rendszer ismerete (CVS, SVN)
   

Amit kínálunk:

• Kiemelkedő bérezés
• Fiatal, dinamikus, ugyanakkor professzionális csapat
• Szakmai támogatás és tudásbázis a munkavégzéshez
• Folyamatos fejlődés, kihívások
• Nemzetközi karrierlehetőség
• Cafeteria rendszer
   

Munkaidő, helyszín:

• Modern, jól felszerelt irodánk Budapest központjában található
• Napi fix, nyolc órás munkaidő

laszlo_spiller@kellyservices.hu

Moreover, the ongoing project that I'm involved seems to have high demands on richness UI (look at their samples). And ExtJS does cover majority of UI controls and has a well designed for extensibility. Besides, the document is good and the community is very active. Another nice thing of ExtJS is it allows you to build the library based on what you need which helps reducing the library size with less effort.

If you're working with Rails, you might want to check an example here. Although Rails seems to get along fine with ExtJS but I think there could be a less effort way to work between them. And there is a couple of plugins that might be useful. I'll report back soon after I really checked them out :)

Теперь мы перейдем к рассмотрению одного из базовых типов визуальных компонентов библиотеки - панели. Панель - это контейнер визуальных элементов, который выполняет роль базового блока при построении пользовательских интерфейсов web-приложений. Панель может содержать верхний и нижний тулбар (панель инструментов) и раздельные секции для заголовка, тела и подвала. Этот компонент также поддерживает функции сворачивания содержимого и набор встроенных кнопок, позволяющих выполнять стандартные действия.

Откроем созданный в прошлом разделе файл helloworld.html в Firefox и вызовем по нажатию клавиши F12 отладчик Firebug. Перейдя на вкладку Console и, отобразив полностью редактор кода, введем новую команду:

test = new Ext.Panel({
title: "Панелька",
html: "список: <li>раз</li>" +
"<li>два</li><li>три</li>"
})

Для исполнения команды нажмем комбинацию Ctrl-Enter. В области выполненного кода отобразится зеленая строка, обозначающая объект JavaScript, который был получен в результате запуска команды:

Рассмотрим ее подробнее: первым делом мы создаем переменную test, которой присваиваем новый объект, возвращаемый конструктором класса Ext.Panel (ключевое слово языка JavaScript - new и название класса). В параметрах конструктора нового объекта задается составной объект (фигурные скобки), содержащий текстовые свойства title и html, соответственно представляющие собой заголовок панели и ее содержимое в формате HTML. В этом примере мы продемонстрируем возможности задания произвольной разметки текста, выведя на экран пример списка.

Выполним следующую команду, которая на основе параметров только что созданного объекта добавит в объектную модель документа (DOM) новые элементы, представляющие собой создаваемую панель. Такое действие в терминах библиотеки называется рендер компонента (а соответствующий метод также носит название render). Вызовем этот метод у созданного объекта test, ассоциированного с нашей панелью, и передадим ему в качестве параметра ссылку на DOM элемент body документа, возвращаемый методом Ext.getBody():

test.render(Ext.getBody())

В общем случае метод render должен получать в качестве параметра строковый идентификатор или ссылку на объект любого DOM-элемента, к которому будет добавлен HTML-код для его отображения (рендера). В данном случае в качестве такого родительского элемента мы используем все окно браузера (DOM-элемент body).

После выполнения последней команды на экране отобразится голубая панелька с заголовком Панелька и ранее заданным списком:

Далее попробуем упростить создание панели, заменив две последовательные команды одной и указав DOM-элемент, который будет являться родительским для компонента, напрямую в параметрах его конструктора в свойстве renderTo. Для проверки работы этого метода нажмем на клавишу F5 и после сброса документа helloworld.html в первоначальный вид выполним команду:

test = new Ext.Panel({
 title: "Панелька",
 renderTo: Ext.getBody(),
 html: "список: <li>раз</li>" +
       "<li>два</li><li>три</li>"
})

Согласитесь, гораздо удобнее. Задание DOM-элемента в конструкторе компонента рекомендуется всякий раз, когда нет необходимости откладывать его отображение в зависимости от каких-либо условий.

Давайте определимся, что объект, передаваемый конструктору класса каждого создаваемого компонента, будем в дальнейшем называть конфигурацией компонента. Свойства, которые допускается указывать в конфигурации описаны в разделе Config Options каждого компонента на страницах документации библиотеки ExtJS.

Что представляет из себя только что созданный объект test? Щелкнем по зеленой строке Object initialConifg=Object title=Панелька events=Object и переместимся на вкладку DOM этого элемента. Здесь представлены доступные переменные и свойства объекта, а также функции, которые доступны для вызова. Для примера перейдем к свойству initialConfig и увидим конфигурацию панели на момент создания. Это очень удобный способ отладки поведения компонентов, которым в дальнейшем мы часто будем пользоваться:

Перейдем на вкладку HTML и развернем дерево элементов, являющихся дочерними по отношению к тегу body (к которому мы привязали новый компонент). Это внутреннее представление созданной нами панели в формате HTML. Мы видим, что базовым элементом панели является контейнер div, имеющий автоматически созданный идентификатор ext-comp-1001 и CSS класс x-panel. В свою очередь он содержит два других div-а, представляющих собой соответственно заголовок панели и ее тело (и содержащие заданные при создании компонента параметры Панелька и список...). Таким образом, эти DOM-элементы с накладываемыми на них стилями CSS представляют собой визуальные компоненты библиотеки ExtJS:

Попробуем далее поэкспериментировать с компонентом и вызовем последовательно методы объекта test:

test.hide();

test.show();

test.collapse();

test.expand();

Первые два выполняют скрытие и повторное отображение визуального компонента (любого компонента, а не только типа Panel!), другие наоборот являются методами класса Panel и организуют сворачивание и восстановление тела панели, по возможности используя визуальные эффекты.

Снова не открою большой тайны, если напомню, что все доступные методы и свойства компонента описаны в документации библиотеки ExtJS. Давайте откроем страницу компонента Panel и поиграемся с некоторыми из них.

test.setWidth(300)

Устанавливает ширину визуального компонента (в нашем случае 300 пикселей):

Имейте ввиду, что по-умолчанию ширина каждого компонента без ее явного указания считается как auto, то есть равной ширине родительского DOM-элемента (в нашем случае панель была равна ширине окна браузера, так как тег body является базовым элементом).

Попробуем изменить содержимое тела панели:

test.body.dom.innerHTML = "Новости нашего сайта!"

Команда обращается к свойству body объекта test, содержащему ссылку на класс Element, который в свою очередь через свойство dom ссылается на DOM-элемент тела панели, и через свойство innerHTML которого, мы присваиваем новое содержимое. Для удобства понимания этой взаимосвязи можете перейти на вкладку DOM и проследовав по дереву body -> dom -> innerHTML визуально запомнить структуру.

Давайте попробуем выполнить следующее действие - полное удаление компонента из документа:

test.destroy()

Перейдем на вкладку HTML и убедимся, что имевшаяся ранее DOM-структура панели уничтожена, а элемент body больше не содержит дочерних объектов:

Перейти далее к разделу Кнопки…

Перейти к содержанию Учебника по ExtJS

Мы помогли Вам? Вы можете поддержать дальнейшее создание учебника по ExtJS.