PivotGrid.

“Первый компонент, который мы хотели бы представить это PivotGrid. Это компонент является инструментом обобщения данных, он идеально подходит для удобной организации больших объемов данных. PivotGrid поможет вам и вашим пользователям суммировать данные любого количества полей, а также легко разбить даннные, например, по параметрам город, год квартал. Посмотрите на пример по ссылке, там мы суммируем данные о продажах. PivotGrid легко интегрируются в уже существующие магазины, а создаются всего с помощью нескольких строк кода. Мы создали ряд примеров, демонстрирующих различные возможности компонента. Вот небольшой пример как можно создать таблицу из примера.”

Личное мнение: Акцентрируется внимание на том, что компонент работает с большими объемами данных, но в примере компонент грузит данные довольно продолжительное время, отсюда возникает вопрос, а есть ли заявленный profit ?

var pivotGrid = new Ext.grid.PivotGrid({
    title     : 'PivotGrid example',
    store     : myStore,
    aggregator: 'sum',
    measure   : 'value',

    leftAxis: [
        {dataIndex: 'person',  width: 80},
        {dataIndex: 'product', width: 90}
    ],

    topAxis: [
        {dataIndex: 'year'},
        {dataIndex: 'city'}
    ]
});

Компонент Календарь.

“Многие разработчики просили нас сделать официальную поддержку компонента Calendar. Календари это открытый вопрос: Есть много способов их реализации и много функций, которые можно добавить. Мы рады вам представить новый компонент для отображения событий за день, неделю и месяц, все они представлены в примере компонента. Также как и с компонентом PivotGrid, новый компонент Calendar предназначен для работы с уже готовым набором данных, что означает легкую интеграцию с уже существующим кодом. Мы пока не включили компонент Calendar в ext-all.js, но включили рабочие версии этих компонентов в examples/calendar директории SDK.”

Личное мнение: по функционалу календарь пока значительно уступает проприетарному компоненту sheduler, но решение по разработке собственного компонента, очень хороший шаг, его не хватало.

Еще кое-что.

“В дополение к этим двум компонентам в новой версии в Grid появился новый тип столбца ActionColumn. В этом типе столбцов рисуются иконки, к которым можно приписать любые функции для манипуляции с Grid. Например, как показано в примере, на двух кнопках работают функции покупки \ продажи. Как и в предыдущий версиях, обратная совместимость является для нас приоритетной задачей. Для нормальной работы нового компонента PivotGrid были внесены изменения в GridView, который, как известно, являлся причиной некорректного поведения в некоторых ситуациях, но все эти проблемы буду исправлены в финальной версии.”

Источник http://www.sencha.com/blog/2010/07/28/announcing-ext-js-3-3-beta-pivotgrids-calendars-and-more/

Для языка 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 .

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

Когда мы отправляем на сервер запрос одной и той же структуры и с одними и теми же параметрами, он кешируется, поэтому когда нам нужно запросить новую порцию данных по этому же url, браузер говорит flash, что эти данные у него уже есть и запроса на сервер не делает. Это относительно распространенная проблема с кешированием в Internet Explorer. У меня она возникла при написании чата, требования к чату были такими, что можно было использовать только flash (только он помогает победить same-origin-policy), нужно было отправлять запросы к домену отличному от текущего. Подробнее о чате напишу как-нибудь в другой раз, про все эти политики безопасности и ограничения, и что предлагает flash для решения этих проблем. Итак, как исправлять ?!

Flash.

Решение в принципе лежит на поверхности, подобным пользуются не только в flash, это распространенный способ избежать кеширования в браузере. Мы просто добавляем уникальный параметр в запрос. В данном примере я использую timestamp через метод класса Date() – date.getTime(), который передаю в качестве параметра key в запросе.

var request:URLRequest = new URLRequest("http://domain.ru/chat_receive.php");
var variables:URLVariables = new URLVariables();
 var date:Date = new Date();
 variables.key = date.getTime();

 request.data = variables;
 request.method = URLRequestMethod.GET;

Важно передавать параметры через URLVariables, первый раз я просто добавил параметры прямо в строку url “http://domain.ru/chat_receive.php”, почему-то IE это не очень понравилось, и он все равно все успешно кешировал.

Back-end.

Теперь делаем фикс на back-end, у меня это PHP, но реализации для других языков отличается не существенно. Зачем мы это делаем ? Способ который помог избежать проблемы, не отключает кеширование, то есть информация все равно попадает в кеш, и теперь ее на порядки больше. Для того чтобы не забивать кеш браузера, мы ставим в заголовок параметр Expires. А также отдаем в заголовке параметры, что кешировать не надо (в отличие от других браузеров ie этого не слушается, для этого мы и передавали уникальный параметр). Вот что у нас получилось:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // disable IE caching
 header("Last-Modified: " . gmdate( "D, d M Y H:i:s") . " GMT");
 header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
 header("Pragma: no-cache"); // HTTP/1.0

Все Internet Explorer побежден.

“Интересные вещи происходят! сегодня мы объединяем силы с проектами 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.

ExtJS классы которые не наследуются от Ext.Component не имеют строчки this.initComponent(); в своем исходном коде.

Собственно схема классов основанных на Component.