Итак. У нас есть extjs form. Обычная такая форма с кнопками save которас сабмитит форму и reset которая ее очищает. И тут нам значит присписило прикрутить на форму еще одну кнопку. Ну к примеру для проверки какой-то. Вот как на картинке. Кнопка используется для проверки xml rpc сервиса. Вот и разберем на этом прмере как эта кнопка работает.

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

Создаем extjs form и добавляем туда необходимые нам поля:

form1Form = new Ext.FormPanel
({"title":"Настройки сайта","labelAlign":"right","labelWidth":150,"width":500,"waitMsgTarget":true,"monitorValid":true}
);
form1set4rpcurlTextField = new Ext.form.Field
({"fieldLabel":"URL сервиса","name":"xmlrpc_url","width":200,"maxLength":255,"allowBlank":true,"xtype":"textfield"}
);

form1set4rpcloginTextField = new Ext.form.Field
({"fieldLabel":"Логин","name":"xmlrpc_login","width":200,"maxLength":25,"allowBlank":true,"xtype":"textfield"}
);

form1set4rpcpasswordTextField = new Ext.form.Field
({”fieldLabel”:”Пароль”,”name”:”xmlrpc_password”,”width”:200,”maxLength”:25,”allowBlank”:true,”xtype”:”textfield”}
);

form1set4rpcidTextField = new Ext.form.Field
({”fieldLabel”:”ID”,”name”:”xmlrpc_id”,”width”:200,”maxLength”:25,”allowBlank”:true,”xtype”:”textfield”}
);
form1set4Fieldset = new Ext.form.FieldSet
({”title”:”Xml Rpc”,”autoHeight”:true,”defaultType”:”textfield”}
);
form1set4Fieldset.add(form1set4rpcurlTextField);
form1set4Fieldset.add(form1set4rpcloginTextField);
form1set4Fieldset.add(form1set4rpcpasswordTextField);
form1set4Fieldset.add(form1set4rpcidTextField);
form1Form.add(form1set4Fieldset);

Вот мы имеем часть формы с полями. Теперь создадим кнопку и тоже добавим ее на форму:

form1set4rpcbuttonButton = new Ext.Button
({"text":"Проверить список"}
);
form1set4Fieldset.add(form1set4rpcbuttonButton);

Затем опишем поведение нашей кнопки.  По нажатию на нее мы собираем в кучку значения из некоторых полей формы и на их основе создаем запрос на сервер. А потом в Ext.Msg.alert показываем ответ:


form1set4rpcbuttonButton .on('click',
function (e)
{
var url = form1set4rpcurlTextField.getValue();
var login = form1set4rpcloginTextField.getValue();
var password = form1set4rpcpasswordTextField.getValue();

var conn = new Ext.data.Connection();
conn.request({
url: ‘http://…………………/testrpc/’,
method: ‘POST’,
params: {”url”: url,”login”: login,”password”: password},
success: function(responseObject) {
Ext.Msg.show({
title:’Status’,
msg: responseObject.responseText,
buttons: Ext.Msg.OK,
minWidth: 500,
});
// Ext.Msg.alert(’Status’, responseObject.responseText);
},
failure: function(responseObject) {
Ext.Msg.alert(’Status’, ‘Connect to server lost.
‘+responseObject.responseText);
}
});
}
);

Вот и все.

Javascript и ссылки на страницы.  Использование javascript для перехода по ссылкам внутри сайта. это всегда головная боль. Поисковые боты очень не любят такие вещи, да и проблема создания закладок на такие страницы тоже актуальна. Современные веяния в вебе, увы, заставляют использовать ajax перезагрузку страниц. Во-первых это модно, а во-вторых, в некоторых случаях, как с extjs приложениями, просто не остается других вариантов. Htmlupdater - единственное лекарство от перезагрузки пары сотен килобайт CSS и javascript файлов самого extjs.

Вот пример, реализации javasctipt обертки на extjs для обработки ссылки на страницу. В самой ссылке пишем:

<a href=\"\/url\/\" onClick=\"tabReload('\/url\/?_update=1') ;return false;\">javascript страницы<\/a>

А собственно javascript функция выглядит так:

function tabReload(url)
  {
  var tmp = Ext.get(”content“);
  var updater = tmp.getUpdateManager();
  updater.setDefaultUrl(url);
  updater.loadScripts =true;
  updater.refresh();
  return false;
  }

Как это работает? Очень просто. При нажатии на ссылку левой кнопкой, срабатывает javascript , а при нажатии средней - просто переход по ссылке.  Параметр _update который передасется на серер нужно обрабатывать, и при его наличии отдавать не всю страницу целиком, а только контентную область.

Вот небольшая подборка полезных регулярных выражений, которые можно использовать как в javascript, так и в серверных конструкциях вроде preg_match или regex . Так сказать регулярные выражения на кахдый день.

Регулярное выраженгие для проверки email адреса (переводы строк нужно убрать):

^((?>[a-zA-Z\d!#$%&’*+\-/=?^_`{|}~]+\x20*|”((?=[\x01-\x7f])[^”\\]|\\[\x01-\x7f])*”\
x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&’*+\-/=?^_`{|}~]+)+|”((?=[\x01-\x7f])[^”\\]|
\\[\x01-\x7f])*”)@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<!\[)\.)(25[0-5]|2[0-4]\d|
[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$

Конечно это не полный стандарт RFC 2822, но для большинства случаев такое регулярное выражение в PHP или JS скрипте вполне подойдет.  И уж точно лучше, чем конструкции вроде ^[\n &lt;&quot;’]*([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+) которые используются обычно.

Как бы это не звучало странным, но класс tree  в принципе никак не может управлять загрузкой дерева. Он показывает все, что загрузил treeLoader.  Так все просто! скажете вы. TreeLoader и управляет загрузкой дерева. А вот и нет.  TreeLoader просто загружает в tree те данные, что выплюнул сервер. Управлением загрузкой данных в extjs treepanel занимается сервер. Это немного неочевидно,  за то очень удобно.  TreeLoader загружает все, что отдал сервер, будь то полное дерево, или только один из его уровней, а treePanel умеет при необходимости ( при отсутствии в дереве соответствующей ветки) попросить TreeLoader забрать с сервера необходимый кусок данных. Причем сервер может вернуть не только запрашиваемый уровень но и  произвольное количество вложенности.

Это очень удобно. Обычно дерево на сервере собирается из базы данных при помощи какой-либо рекурсивной функции.  достаточно в этой функции просто вести подсчет числа элементов в дереве, и по превышении заранее рассчитанной величины прекращать  сбор данных.  Таким путем мы можем найти баланс между скоростью и удобством. Отдавать все дерево целиком в treePanel не всегда возможно.  Деревья бывают большими. А отдавать по одному уровню за запрос не сильно удобно с точки зрения пользователя, когда на каждый клик мыши будет обращение к серверу за новой порцией данных. А вот разбив отдачу дерева скажем по 50-100 узлов за раз мы найдем необходимый компромисс.

Особенность extjs - очень тяжелый HTML код. Причем броузер напрягается дважды. первый раз, когда все счастье собирается в DOM и второй раз, когда непосредственно выводится на экран. Как следствие - торможение интерфейса при более-менее серьезном количестве элементов. Причем это касается не только гридов и деревьев, но и форм и вообще любых элементов. Есть несколько узких мест, которые нужно стараться обходить.

1. Загрузка собственно extjs. Как ни крути, как не сжимай, а размер javascript кода плюс CSS файла это весьма серьезно.  Тем более, что кроме загрузки есть еще и инициализация.  Старайтесь по-минимуму перегружать страницы в браузере.  Постарайтесь все вынести в updatemanager.

2. Javascript это костыль и инородное тело в браузере. Помните об этом постоянно.  Невнятная реализация многопоточной схемы исполнения скрипта,  делает нежизнеспособной саму идею многопоточности в js.  Собственно это и есть  источник основных торомозов в  extjs.   Поэтому старайтесь не полагаться на автоматику не скармливайте в конструктор класса огромный JSON с вложенными JSON ветками для дочерних элементов.  Создавайте дочерние элементы явно, вызовом соответствующих конструкторов в переменные, а потом кидайте эти переменные в JSON. Это значительно ускорит генерацию элементов.

3. applyTo это зло. Используйте render , и вызывайте его тогда, когда вам нужно, а не тогда, когда великий рандом скажет.

4. Не увлекайтесь созданием сраз большого числа визулальных элементов ( гридов, окон и т. п) а затем их показом на экране по мере необходимости. Практика показывает, что приложение в котором сразу генерится 5 гридов и 3 формы  работает в 5-10 раз медленнее, чем перегрузки через updatemanager.

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

Рассмотрим задачу. Есть поисковая форма на extjs. В этой форме есть два поля с датой, которые задают интервал поиска. Нужно произвести проверку на длинну интервала, и если временной интервал превышает 31 день, то выдать сообщение об ошибке.

Фирменное руководство extjs по этому поводу не дает никаких примеров. А те примеры, что есть в сети предлагают решение на основе всплывающего окна с сообщением об ошибке. Я же предлагаю решение, работающее так же как и родные валидаторы.

Создадим наши поля на форме, заполним их значениями по-умолчанию и навесим фунецию проверки значений на правильность:

var today = new Date();
today = today.format('d/m/Y');
var fromday = new Date().add(Date.DAY, -6);
fromday = fromday.format('d/m/Y');
fromDate = new Ext.form.DateField({
id:'from',
fieldLabel: 'From',
name: 'from',
width:170,
allowBlank:false ,
format:'d/m/Y' ,
value: fromday,
validateValue: function (value) { return validateFromTo(value); }
});

toDate = new Ext.form.DateField({
id:'to',
fieldLabel: 'To',
name: 'to',
width:170,
allowBlank:false,
format:'d/m/Y',
value: today,
validateValue: function (value) { return validateFromTo(value); }
});

А вот и собственно функция проверки:

function validateFromTo(value)
{
var v_from = fromDate.getValue();
var v_to = toDate.getValue();
if ((((parseInt(v_to.format('U'))-parseInt(v_from.format('U'))))/3600/24) >31)
{
searchForm.getForm().markInvalid({'from':'The time period for a search cannot exceed 31 days. Please adjust dates to cover a 1 month time period'});
searchForm.getForm().markInvalid({'to':'The time period for a search cannot exceed 31 days. Please adjust dates to cover a 1 month time period'});
return false;
};
fromDate.clearInvalid();
toDate.clearInvalid();
return true;
}

На ней остановлюсь подробнее. Сначала мы вычисляем временной интервал между начальной и конечной датами. getValue возвращает обьект типа date. а его метод format форматирует дату так как нам нужно. Мы ее переведем в секунды. Потом отнимем от конечной даты начальную и проверим, чтоюы этот интервал был не более 31 дня.

Если интервал больше 31 дня, то при помощи метода markInvalid мы помечаем оба поля нашим сообщением об ошибке, а если меньше, то при помощи clearInvalid  сбрасываем у обоих полей статус ошибки.

В результате имеем форму, на которой валидатор обрабатывает сразу два поля.


var Form1 = new Ext.form.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.action='куда сабмитить форму';
this.getForm().getEl().dom.method='POST';
this.getForm().getEl().dom.submit();
}
});


,initComponent:function() {

// а сюда пишем функционал для инициализации
Ext.apply(this, {
items:[{},{},{}]
,buttons:[{},{}]
});

// не забываем вызвать инициализацию родительского класса
SuperForm.superclass.initComponent.apply(this, arguments);

}

// А вот так перекрываем евенты:
,onRender:function() {
// сюда пишем свою отрисовку

// и снова не затыть вызвать ролительский метод
SuperForm.superclass.onRender.apply(this, arguments);

}

});

// И чтобы extjs смог включить ваш класс в свой репозитарий, придумаем ему xtype
// и зарегестрируем его в extjs
Ext.reg(’mysuuperform’, SuperForm)