Очень важным моментом в интерфейсе сайта является сохранение его текущего положения, для того, чтобы после перезагрузки страницы, пользователю не пришлось заново повторять свои действия с настройкой интерфейса сайта под себя. Идеальным средством для хранения состояния пользовательского интерфейса является cookies. Всем известно как работать с куки с помощью серверных (backend) языков,  но зачастую проще это делать напрямую из JavaScript. Конечно можно передавать данные интерфейса серверной части, а там уже сохранять их хоть в БД. Но как правило, если вы не разрабатывайте новый интерфейс для gmail, нет необходимости делать это для 5-6 параметров.

JavaScript и Cookies.

В JavaScript есть стандартные методы для работы с document.cookie, именно так происходит обращение к куки в JavaScript. Например функция для установки куки будет выглядеть следующим образом

function setCookie(c_name,value,expiredays)
 {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
 }

Как вы видите не очень удобно, поэтому я и предпочитаю пользоваться JQuery плагинами, если конечно фреймворк в проекте уже присутствует, если нет, то подключать JQuery, только из-за работы с куки не рационально.  В принципе взяв готовые функции для document.cookie или написав их самостоятельно, можно свести неудобства и количество кода к минимуму.

Плагины cookies для JQuery.

Если в вашем сайте уже используется JQuery, то наиболее простой способ наладить работу с cookies, это использовать плагин. Плагинов довольно много я обычно использую ezCookie. В плагине содержатся стандартные методы для работы с cookies – установка, чтение, удаление. На странице проекта есть детальное описание всех методов. Плагин ezCookie отличается от многих подобных автоматическим распознаванием значения установленной cookie, и, если это JSON данные, то функция автоматически возвращает JSON объект. Такой режим работы позволяет устанавливать subcookie, то есть множества пар имя:значение для одного cookie (для одной cookie переменной).

Сохранение положения интерфейса.

Давайте напишем небольшой пример, который позволит понять схему сохранения простых позиций интерфейса. Пусть у нас будет 5 разноцветных квадратов, которые по клику на кнопку “закрыть” закрываются, и текст на кнопке меняется на “открыть”. И при нажатии на кнопку “открыть” соответственно квадрат снова становится видимым.

Для этого воспользуемся стандартной JQuery функцией toggle (переключатель), которая в качестве аргументов принимает 2 функции, одна из которых срабатывает на четном щелчке мыши, другая на нечетном. Чтобы сохранить положение квадратов, мы в первой toggle функции будем устанавливать значение cookie в 0, а на второй функции в 1, ноль означает, что квадрат скрыт, а единица соответственно, что квадрат виден.

Здесь я использую функцию ezCookie $.setSubCookie, чтобы не увеличивать количество записей cookie. Так как структурно записи для каждого квадрата у нас равны, то все проще хранить в одной cookie с именем “ui_save”. В качестве дополнительных параметров метод $.setSubCookie позволяет установить время жизни cookies, но в данном случае используется время жизни по умолчанию.

Итак позицию интерфейса в зависимости от действий пользователя мы записали, теперь нам необходимо сделать так, чтобы после загрузки страницы интерфейс возвращался в записанное состояние. Для этого мы сначала считаем нашу куку функцией $.cookie(“ui_save”), эта функция автоматически определяет какое значение установлено в куке и если это JSON, то она возвращает JSON объект, что в нашем случае и происходит. Далее для каждого квадрата мы проверяем значение и если оно равно нулю то вызываем событие click, которое установит нужное положение квадрата.

	$(document).ready(function(){
		$(".close").toggle(
			function(){
				$(this).prev().slideUp(); //скрываем квадрат
				$(this).html("Открыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение закрыть
				$.setSubCookie("ui_save", class_name, 0);
			},
			function(){
				$(this).prev().slideDown(); //разворачиваем квадрат
				$(this).html("Закрыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение открыт
				$.setSubCookie("ui_save", class_name, 1);
			}
		);

		//Устанавливаем необходимую позицию интерфейса
		var ck = $.cookie("ui_save");
		for(key in ck){
			if(ck[key] == 0){
//вызываем событие "закрыть"
				$("." + key).next().trigger('click');
			}
		}

	});

То что получилось можно посмотреть здесь, после обновления страницы позиция интерфейса (закрытые, открытые квадраты) сохраняется.

Для языка Javascript очень важно количество байт кода – это напрямую влияет на производительность. Во многом из-за этого, как я думаю, придумано множество сокращений. Также эти сокращения записи, позволяют сделать код более читабельным и писать его быстрее.

Инкремент/Декремент/Умножение/Деление

Вместо:

growCount = growCount + 1;
shrinkCount = shrinkCount - 1;

Намного проще и красивей написать:

growCount ++;
shrinkCount --;

Для сложения\вычитания\умножения\деления

growCount += 100; //увеличиваем переменную growCount на 100
shrinkCount -= 2; //уменьшаем переменную shrinkCount на 2

moreCount *= 5; // умножаем переменную moreSweets на 5
lessCount /= 3; // делим переменную lessApple на 3

Условный оператор.

Следующая конструкция, знакомая многим из других языков программирования экономит сразу несколько строк кода. Было:

if(myAge > legalAge) {
    canDrink = true;
}
else {
    canDrink = false;
}

Стало:

var canDrink = (myAge > legalAge) ? true : false;

Заполнение ассоциативного массива.

Многие привыкли делать это следующим образом:

var language = new Array();
language['Language Name'] = 'Javascript';
language['Type'] = 'Object-oriented';
language['Framework'] = 'jQuery';
language['Other'] = 'Improve Usability';

Javascript же предлагает следующую конструкцию:

var language = {
    'Language Name' : 'Javascript',
    'Type' : 'Object-oriented',
    'Framework' : 'jQuery',
    'Other' : 'Improve Usability'
};

Значение переменной по умолчанию.

Вместо много-строковой конструкции:

function displayValues(limit) {
    var length;
    if(limit) {
        length = limit;
    } else {
        length = 10;
    }
}

Можно просто написать:

function displayValues(limit) {
    var length = limit || 10;
}

Если функции не было передан параметр limit, то length будет равен значению по умолчанию – 10
Для того, чтобы переменная length получила значение 10 должны быть выполнены следующие условия limit =

• false
• 0
• null
• undefined
• empty string

Во всех остальных случаях переменная length будет равна переменной limit .

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

“Интересные вещи происходят! сегодня мы объединяем силы с проектами jQTouch и Raphaël, а также меняем имя домена проекта с extjs.com на sencha.com. Эти проекты лидируют в своих областях и мы рады видеть в своих рядах их создателей Девида Канеду и Дмитрия Барановского. Мы считаем, что это сотрудничество приведет к впечатляющим результатам. … Sencha эт0 новое название нашей компании, а также разновидность япоского зеленого чая (Так вот он какой стратегический напиток ExtJS разработчика ?!).

Развитие Ext JS, Ext GWT, Designer, Direct и остального будет продолжаться, думаем только над переименованием Ext JS Designer на Sencha Designer. Одним из преимуществ переименования для нас является то, что мы разделяем названия компании и продукта.

Проекты jQTouch и Raphaël так и останутся под лицензией MIT. Мы создаем Sencha Labs подразделение, которое будет заниматься торговыми марками и авторскими правами всех некоммерческих проектов связанных с Sencha. Мы также рады сообщить, что Джонатан Старк известный разработчик мобильных приложений и автор двух книг под редакцией O’Reilly станет руководителем jQTouch (Добро пожаловать на борт Джонатан)” – вот такое сообщение получили зарегистрированные на форуме Ext JS, позже оно было опубликовано и на сайте.

Что можно ожидать от объединения ? Я думаю только хороших новых результатов. jQTouch это jQuery плагин для разработки под мобильные девайсы типа iPhone, iPad и прочие «forward-thinking» девайсы. Как поможет эта библиотека в развитии Ext JS пока соевершенно не ясно. А Raphaël это крутая штука для разработки векторной графики под веб. Подключение этого проекта позволит модифицировать компоненты для построение графиков и диаграмм Ext JS, которые сейчас работают с помощью Flash.

Есть также мнение, что переименование связано с тем, что из компании ушел ее основатель Джек Слокум, или вся команда разработчиков ушла от него в новую компанию Sencha. Вот что пишут про это на сайте: “После интенсивной работы над развитием ExtJS, за последние 18 месяцев Джек стремительно прекратил свое участие. Хоть он и может вернуться на некоторых условиях, мы желаем ему всего наилучшего.”

В любом случае, что же действительно будет дальше покажет время.

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

Введение.

В течение последних нескольких лет постоянно появлялись новые методы использования альтернативных шрифтов. Все чувствуют подъем дизайна и юзабилити в веб, развитие сервисов и облачных приложений, все это ведет за собой и увеличение требований к типографике. Ограничение стандартным набором шрифтов, мешает развитию веб-дизайна в расширяющемся в геометрической прогрессии вебе. Поэтому стали появляться такие платные сервисы как TypeKit и FontDeck. В будущем, наверное, будут пояляется и другие.

Однако если вы посмотрите на основные технологии веб HTML, CSS, Javascript, PHP, все они являются бесплатными. Исходя из этого можно предположить, что вебу нужен эффективный, а главное бесплатный инструмент. Поэтому, то что предлагает нам Google наиболее подходящее в настоящее время решение для развития типографики в веб.

Меняет правило игры ?

Очевидно, что когда Google берется за что-нибудь, он делает это хорошо и меняет представление об этой отрасли. Так и со шрифтам, компания незаметно для всех выпустила (совместно с Typekit) Font API, который в долгосрочной перспективе изменит веб. Пока другие компании придумывают бизнес модели для подобных  сервисов, Google просто выпустили качественный бесплатный продукт.

Давайте посмотрим как это все работает на небольшом примере live demo:

HTML

Добавляем шрифты в Google Fonts API.

Теперь когда мы поняли, как же все это работает, давайте добавим своих шрифтов, для этого перейдем к Font Api и посмотрим на Каталог Шрифтов. Здесь вы увидите различных 18 шрифтов. Каждый шрифт имеет несколько вариантов. Когда вы выберите тот, который вам нравится, просто нажмите на него, чтобы увидеть дополнительные параметры. Допустим выберем IM Fell.

Когда вы увидите картинку с описание шрифта, просто нажмите на кнопку Get Code и вы увидите html код который нужно вставить в head страницы, а также пример css, как использовать новый шрифт.

Есть два способа вставки шрифта на сайт. Через html и через css @import.

Через HTML

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>

Через @import.

@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica);

Далее мы можем использовать на сайте подключенный шрифт:

<div>
<div>
<pre>#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
	font-family: 'IM Fell DW Pica', arial, serif;
}</pre>
</div>
</div>

Помимо этого, есть WebFont Loader инструмент, который представляет собой библиотеку Javascript, которая “дает вам больший контрль над шрифтом и позволяет использовать нескольких провайдеров для шрифтов” (в данном случае Font API – это провайдер шрифта, как и TypeKit) , это кстати их совместная разработка.

Выводы.

Наверное вы обратили внимание, насколько просто использование новых шрифтов с Google Font API. В отличие от существовавших до настоящего времени инструментов вам не нужно получать лицензию, которая прикрепляется к специально зарегистрированному доменному имени. Вы можете использовать шрифты даже в обычном примере, у вас на локальном компьютере.

Есть несколько преимуществ для выбора Google Font API, на которые стоит обратить внимание:

• Шрифт скачивается с сервера Google.
• CDN Google быстрее чем ваш сайт.
• От повсеместного использования шрифты будут кешироваться за счет того, что имеют одно расположение (сервер Google).

Единственный видимый минус Font API, это небольшое количество шрифтов, но инструмент новый, и я думаю, количество доступных шрифтов будет со временем увеличиваться.

Источник: http://designshack.co.uk/

1. Javascript == Java

Разработчик из Соединенного Королевства (UK) Jeremy Keith, придумал такое определение этому мифу:

Java это такой же Javascript, как ham (ветчина) и hamster (хомяк).

Схожи только имена, но Java и JavaScript не связаны между собой.  Есть целый ряд поверхностных сходств, но такие же сходства можно найти и в других любых двух языках, имеющих C-подобный синтаксис.

Первоначально язык Javascript назывался Mocha, в какой-то момент стал LiveScript, и наконец стал называться Javascript в тот момент, когда язык Java был провозглашен спасителем жизни, вселенной и всего остального. Название всего лишь маркетинговых ход компании Netscape и ничего более.

2. Javascript “игрушечный” язык.

Часть “script” в названии языка, создаем обманчивое впечатление, что это урезанная, макро версия Java. Это не так. Во всяком случае, популярные “фичи” JavaScript, такие как замыкания и лямбда-функции в настоящее время оказали влияние на другие языки, такие как PHP, C# и наконец сам Java.

Javascript наиболее часто встречается в виде встроенного в браузер интерпретатора, но это не означает, что он менее мощный в отличие от компилируемых языков программирования.

3. Javascript есть только в браузерах.

Большинство людей используют Javascript в качестве языка встроенного в браузер, но его (как и другие языки основанные на стандарте ECMAScript ) можно найти во многих других местах, таких например как:

• Браузер Mozilla Firefox и почтовый клиент Thunderbird используют Javascript для некоторых прикладных процессов.
• Flash ActionScript основан на Javascript.
• PDF файлы могут содержать встроенный Javascript.
• Множество десктоп виджетов от Microsoft и Apple используют Javascript.
• OpenOffice.org обеспечаивает поддержку Javascript.
• webOS, используемый в мобильных устройствах Palm, применяет Javascript, как язык для приложений.
• Javascript может быть использован для создания приложений в Gnome и в качестве скриптового языка в Windows.

Javascript пока не имеет полноценной серверной реализации, хотя несколько десятков хороших реализаций существует. День, когда мы сможем использовать Javascript и для серверной и для клиентской части когда-нибудь наступит, но непонятно, как скоро.

4. Javascript до сих пор не отлажен и имеет множество багов.

Эти дни давно уже стали преданием. Все производители браузеров соблюдают стандарт ECMAScript и очень редко можно встретить дополнительные фунции в Javascript.

Тем не менее реализация в браузерах не всегда одинакова: различные особенности манипуляции DOM объектами, особенности обработки событий, и причуды браузера могут доставить не мало головной боли при разработке. Это не вина самого языка, это проблема браузеров, через которые Javascript получает доступ к его, браузера, объектам.

5. Javascript не Объектно-ориентированный язык.

Путаница возникает оттого, что Javascript не использует привычные способы организации объектов. Отсутствие ключевого слово “class” заставляет разработчиков думать, что Javascript это функциональный язык программирования.

Javascript предлагает модель прототипов. Это действительно потрясающе, вы можете писать, как функциональный код, так и организовывать код в классический объект с частными методами и свойствами.

Кроме того, все в Javascript является объектами, даже типы данных и функции. А как вам такое:

var x = new Number(123);
var opp = "oops".substr(0,3);
var f = function() { return function() { alert("hello!"); }; };

Как насчет передачи функции в виде параметра:

var Add = function(a, b) { return a + b; };
function Calculate(func, a, b) {
	return func(a, b);
}
var s = Calculate(Add, 1, 2); // s = 3

Или вы хотите расширить собственные типы ?

// reverse any string
String.prototype.Reverse = function() {
	return this.split("").reverse().join("");
};
var h1 = "Hello!";
var h2 = h1.Reverse(); // !olleH

Javascript на первый взгляд может показаться непонятным, но вы поймете его элегантность и мощь, когда опять будете программировать на своем основном языке.

Вы все еще верите в эти мифы ?

Источник: http://www.sitepoint.com/

В размышлениях об интерактивности задавался мыслью как сделать удобный с точки зрения usability загрузчик файлов.  Плюс подогревал интерес к механизму работы ajax загрузчика в ExtJS. Делая однажды чат и разобравшись в ограничениях браузеров, узнал, что нет возможности отправлять файл по средством объекта xmlhttprequest. Поэтому было непонятно, как ExtJS uploader отправляет файлы, как будто делает это через ajax. Работая над созданием чата, я также ознакомиться с другими ограничениями браузеров, например на количество одновременных запросов к одному домену (ограничены двумя запросами), а также со всевозможными способами обхода этого ограничения. Там же для удобства применялся iframe транспорт, который позволяет отправлять обычные POST запросы через невидимый (0 px на 0 px) iframe. После этого мне сразу стал понятен механизм работы загрузчика файлов в ExtJS.

Решил добавить юзабильности в один из проектов и использовать этот способ для загрузки файлов, благо есть готовый плагин, называющийся AJAX Upload, хотя как я уже писал ajax тут не причем, все реализовано следующим образом:

• Плагин создает невидимый input над элементом, к которому вы привязываете нагрузку. То есть когда вы нажимаете на кнопку, появляется окно со стандартным выбором файла.
• Затем когда вы выбираете файл плагин отправляет форму содержащую input с файлом через iframe.

“Обычно для закачки файлов мы используем file input (<input type=”file” />), его проблематично стилизовать. В современных веб приложениях этот input выглядит устаревшим. Можно конечно использовать для загрузки Flash, но Javascript прекрасно решает эту задачу. Плагин AJAX-Upload позволяет легко загружать несколько файлов без перезагрузки страницы. Он работает во всех браузерах и не требует никаких дополнительных библиотек для работы. К тому же он не затрагивает глобальных namespace‘ов и прекрасно работает вместе с jQuery и Prototype.”

Работать с плагином довольно легко. Достаточно создать любой DOM элемент и привязать к нему плагин. Плагин отправляет файлы в виде обычного POST запроса. Поэтому можно обрабатывать их загрузку на любом серверном языке. На сайте плагина много работающий примеров. В плагине даже реализовано ограничение на расширения загружаемых файлов.

Распространяется плагин свободно под лицензией MIT.

Есть частая проблема, точнее особенность JQuery, о которой часто забывают дизайнеры и разработчики, она заключается в том, что вся анимация на странице при вызове попадает в “стек”. Если у вас на странице есть множество элементов с анимацией, например фотографии в фотогаллерее, то когда пользователь быстро проведет по нескольким фотографиям и перестанет двигать мышью, он будет наблюдать как анимация появляется постепенно на каждом элементе. Наглядно эту проблему можно посмотреть на сайте druckbar, если вы быстро проведете мышкой по четырем панелькам, то будете долго ждать пока в шапке появится соответствующие картинки.

Вы можете решить эту проблему одним из следующих способ:

Использовать метод .stop(). Когда этот метод используется на элементе, он немедленно прекращает его анимацию, если конечно она есть.

$("ol#gallery li").hover(function () {
  $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
  $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Другой способ решить проблему со “стеком” анимации, это использовать плагины, например hoverIntent. Этот плагин делает анимацию доступной только, если пользователь двигает мышью достаточно медленно.

Старайтесь не злоупотреблять с анимацией контента.

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

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

Давайте добавим функциональности к Ext.form.Combobox, сделаем так, чтобы перед каждым элементом списка отображалась иконка.

Давайте назовем наш плагин Ext.ux.IconCombo, а также зарегистрируем для него xtype iconcombo.

Создаем файлы.

Наш первый шаг заключается в том, чтобы подготовить файлы для нашего плагина.

• iconcombo.html: HTML код приложения, которое будет содержать наш плагин. Чтобы сделать этот пример более простым, этот файл также будет содержать Javascript код и CSS. В реальном приложении нужно хранить отдельно код и стили.
• Ext.ux.IconCombo.js: Javascript код нашего плагина.

iconcombo.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
    <script type="text/javascript" src="Ext.ux.IconCombo.js"></script>

    <style type="text/css">
    .ux-flag-us {
        background-image:url(../img/flags/us.png) ! important;
    }
    .ux-flag-de {
        background-image:url(../img/flags/de.png) ! important;
    }
    .ux-flag-fr {
        background-image:url(../img/flags/fr.png) ! important;
    }
    .ux-icon-combo-icon {
        background-repeat: no-repeat;
        background-position: 0 50%;
        width: 18px;
        height: 14px;
    }

    /* X-BROWSER-WARNING: this is not being honored by Safari */
    .ux-icon-combo-input {
        padding-left: 25px;
    }

    .x-form-field-wrap .ux-icon-combo-icon {
        top: 3px;
        left: 5px;
    }
    .ux-icon-combo-item {
        background-repeat: no-repeat ! important;
        background-position: 3px 50% ! important;
        padding-left: 24px ! important;
    }
    </style>

    <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif';
Ext.onReady(function() {
    var win = new Ext.Window({
        title:'Icon Combo Ext 2.0 Extension Class Example',
        width:400,
        height:300,
        layout:'form',
        bodyStyle:'padding:10px',
        labelWidth:70,
        defaults:{anchor:'100%'},
        items:[{
            xtype:'iconcombo',
            fieldLabel:'IconCombo',
            store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [
                        ['US', 'United States', 'ux-flag-us'],
                        ['DE', 'Germany', 'ux-flag-de'],
                        ['FR', 'France', 'ux-flag-fr']
                    ]
            }),
            valueField: 'countryCode',
            displayField: 'countryName',
            iconClsField: 'countryFlag',
            triggerAction: 'all',
            mode: 'local'
        }]
    });
    win.show();
});
    </script>
    <title>Icon Combo Ext 2.0 Extension Class Example</title>
</head>
<body>
</body>
</html>

Этот файл помимо html разметки содержит функцию фасад – onReady, которая создает окно с формой, а на ней единственный элемент наш iconcombo. Будьте внимательны, в этом примере реальной формы не создается (тега <form> нет). Хранилище (store) iconcombo содержит уже заполненые данные для тестирования.

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

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

Ext.ux.IconCombo.js

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
  * Ext.ux.IconCombo Extension Class for Ext 2.x Library
  *
  * @author  Ing. Jozef Sakalos
  * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $
  *
  * @class Ext.ux.IconCombo
  * @extends Ext.form.ComboBox
  */
Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {

        // call parent initComponent
        Ext.ux.IconCombo.superclass.initComponent.call(this);

    } // end of function initComponent
});

// register xtype
Ext.reg('iconcombo', Ext.ux.IconCombo);

// end of file

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

Javascript файл выше делает именно это.

Теория.

Чтобы расширить класс в ExtJS мы не должны создавать функцию-конструктор. Нам просто нужно присвоить значение возвращаемое функцией Ext.extend при ее вызове в нашем пространстве имен. Ext.extend получает в качестве аргументов родительский класс и конфиг (функционал расширения) в качестве второго аргумента, и возвращает наш класс-раширение.

Все что мы раньше делали в конструкторе в старых версиях Ext 1.x, теперь делается в методе initComponent, который мы перезаписываем в родительском классе. initComponent это метод-конструктор родительского класса.

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

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

Приступим.

Пока все хорошо. Теперь если открыть iconcombo.html, вы должны увидеть стандартный combobox с тремя значениями и выбранной Германией. Пока конечно же никаких иконок.

Теперь пришло время поработать. Добавьте следующие строки в Ext.ux.IconCombo.js перед вызовом родительского метода initComponent:

Ext.apply(this, {
            tpl:  '<tpl for=".">'
                + '<divst0">'{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });

В этом коде мы переопределяем стандартные элементы combobox нашими, которые будут использовать css класс iconClsField.

Отлично, готовы протестировать ? Обновите страницу, круто да ?

Замечательно у нас красивые значки при открытии списка, но мы также хотим видеть флаг, когда combobox закрыт, не так ли ?

Добавьте следующий код после окончания кода метода initComponent:

onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);

        // adjust styles
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('ux-icon-combo-input');

        // add div for icon
        this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
            tag: 'div', style:'position:absolute'
        });
    }, // end of function onRender

    setIconCls:function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    }, // end of function setIconCls

    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    } // end of function setValue

Вызов события onRender сначала вызывает родительский метод onRender, а потом добавляет стили и div’ы с иконками.

Мы также добавляем метод setIconCls и перезаписываем родительский метод setValue. Конечно мы хотим, чтобы родительский метод setValue тоже выполнился, поэтому мы сначала вызываем его, а потом выполняем наш метод setIconCls.

Окончание.

Теперь последние испытание: перезагрузите страницы. Если вы при копировании примера не сделали ошибок вы получили новое расширение Ext.ux.IconCombo. Конечно можно еще усовершенствовать наше расширение, но это только лишь пример, как раcширять классы в ExtJS.

Окончательный код.

Вот полный код того, что у нас получилось:

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
  * Ext.ux.IconCombo Extension Class for Ext 2.x Library
  *
  * @author  Ing. Jozef Sakalos
  * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $
  *
  * @class Ext.ux.IconCombo
  * @extends Ext.form.ComboBox
  */
Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {

        Ext.apply(this, {
            tpl:  '<tpl for=".">'
                + '<divst0">'{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });

        // call parent initComponent
        Ext.ux.IconCombo.superclass.initComponent.call(this);

    }, // end of function initComponent

    onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);

        // adjust styles
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('ux-icon-combo-input');

        // add div for icon
        this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
            tag: 'div', style:'position:absolute'
        });
    }, // end of function onRender

    setIconCls:function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    }, // end of function setIconCls

    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    } // end of function setValue
});

// register xtype
Ext.reg('iconcombo', Ext.ux.IconCombo);

// end of file

Источник: http://www.extjs.com/learn/Tutorial:Extending_Ext2_Class.

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

var object1 = {
    property1 : 'Свойство 1',
    method1 : function() {
        alert(this.property1);
    }
}

При вызове object1.method1(); У нас выпадет alert с текстом: “Свойство 1″.

Создадим другой класс, назовем его object2

var object2 = {
    property1 : 'Свойство object2',
}

Теперь попробуем выполнить следующий код: object1.method1.call(object2); У нас выпадет alert с текстом: “Свойство object2″. Почему так получилось ? Мы указали функции при вызове “scope” объект, то есть объект, который функция присвоила this, как будто бы мы написали в теле функции this = object2; поэтому текущим у нас оказался объект object2, а не object1.

Когда у нас нет возможности вызывать метод call, это например, происходит при создании новой функции, в ExtJS есть специальный метод createDelegate, который так же принимает в качестве аргумента “scope” объект, в данном случае object2:

var newFunction = object1.method1.createDelegate(object2);

Теперь если мы вызовем нашу созданную функцию newFunction(); то мы также получим alert c текстом: “Свойство object2″.

Иногда “scope” объект удобно указывать через свойство объекта. Допустим у нас есть метод в классе AjaxObject, представляющий из себя ajax запрос, и есть свойство класса property1:

var AjaxObject = {
    property1: 'Свойство 1',
    scope: this,
    sendAxaj: function() {
        Ext.Ajax.request({
            url: '/api.php/' ,
            method: 'GET',
            success: this.ajaxSuccess,
            params: post,
            scope: this
        });
    },
    ajaxSuccess: function(response) {
        alert(this.property1);
    }
}

Для того, чтобы мы могли каждый раз использовать методы и свойства главного класса AjaxObject, мы прописываем объектам свойство scope: this. Это в первом случае позволяет нам легко использовать метод обратившись через this.ajaxSuccess. А во втором случае, в callback функции использовать свойство главного класса AjaxObject this.property1.

Scope и createDelegate() является незаменимой вещью при построении больших приложений методом пред настроенных классов.

Функции которыми я сразу начал пользоваться, хотя до этого не догадывался о существовании некоторых из них в Dreamweaver:

• Проверка CSS и HTML валидности на лету (В Dreamweaver по умолчанию отключена)
• Удобное использование code snippets (В Dreamweaver по умолчанию отключена)
• Тестирование во всех браузерах установленных в системе в одном окне, удобно сравнивать как выглядит сайт в различных браузерах (В Dreamweaver такой фукции я не видел, поправьте меня)
• Code Hyperlink удобный переход к объявлению функции из ее вызова.
• Панелька DOM структуры
  

  Dom Panel

Хотя я думаю, что я нашел еще не все функции этой IDE, уже сейчас я решил отказаться в ее пользу от Dreamweaver.
Ну и напоследок скриншот самой программы

Expression Web 3

Вывод: благодаря грамотному userfriendly интерфейсу я перешел в Dreamweaver на Expression Web. Плюс MS за подачу аналогичного функционала в новом свете.