Блог маленького, но очень отважного программиста » ExtJS

Анонсирован Ext JS 3.3 Beta

Xo66uT — Thu, 29 Jul 2010 06:43:39 +0000

В этом релизе сделано более 160 багфиксов и сделано несколько полезных компонентов.

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/

ExtJS теперь Sencha

Xo66uT — Thu, 17 Jun 2010 10:35:46 +0000

Ext JS + jQTouch + Raphaël = Sencha

“Интересные вещи происходят! сегодня мы объединяем силы с проектами 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 месяцев Джек стремительно прекратил свое участие. Хоть он и может вернуться на некоторых условиях, мы желаем ему всего наилучшего.”

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

Динамическая загрузка файлов – AJAX Upload

Xo66uT — Fri, 30 Apr 2010 11:40:39 +0000

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

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

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

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

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

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

Раширение классов в ExtJS

Xo66uT — Fri, 23 Apr 2010 07:12:51 +0000

Цель.

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

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

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

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

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

iconcombo.html



    
    
    
    
    

    

    
    Icon Combo Ext 2.0 Extension Class Example

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

нет). Хранилище (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:  ''
                + ''{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + ''
        });

В этом коде мы переопределяем стандартные элементы 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:  ''
                + ''{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + ''
        });

        // 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.

Что такое scope и createDelegate() в ExtJS

Xo66uT — Tue, 20 Apr 2010 15:51:39 +0000

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

Предположим у нас есть класс 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() является незаменимой вещью при построении больших приложений методом пред настроенных классов.

Написание больших приложений на ExtJS (Часть3)

Xo66uT — Sat, 27 Mar 2010 09:35:26 +0000

Важно.

Если вы этого еще не сделали, обязательно прочитайте первую часть и вторую часть этой статьи. Без этого будет очень трудно объяснить (или даже невозможно), а для вас понять, что написано в этой части.

Вступление.

Помогая на форуме, и читая код людей, которые делали ошибки при наследовании ExtJS классов, я обратил внимание на ошибки, которые пользователи обычно делают. Поэтому я решил написать эту статью, в которой буду собирать эти ошибки, и объяснять как их решать. Я имею ввиду что я не буду создавать больше частей этой статьи, а буду добавлять найденные ошибки сюда, вместо того чтобы бесконечно создавать части 4, 5 и т.д.

Наиболее распространенными источниками ошибок являются:

Ненужное наследование.
Добавление объектов к прототипу.
Жесткая привязка к id.

Ненужное наследование.

Основными причинами наследования являются:

Повторное использование.
Добавление функциональности.
И то и другое.

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


MyPortlet = Ext.extend(Ext.Panel, {

anchor:'100%'

,draggable:true

,defaultType:'mygraph'

});

Вы видите что получается ? Мы будем использовать класс MyPortlet много раз, поэтому вместо того что писать каждый раз в приложении в 10000 строк эти строчки, мы просто 100 раз вызовем пред настроенный объект и сэкономим 297 строк кода.

Другая польза этого метода состоит в том, что если мы хотим изменить тип с ‘mygraph’ на ‘mygraph_new’, нам надо лишь поменять код в классе, который мы используем, это избавит нас от поиска и замены это же параметра в 100 мест кода.

(Ну 100 раз это конечно преувеличение, но экономия все равно будет).

Если говорить о добавлении нового функционала, то вот простой пример:


MyPanel = Ext.extend(Ext.Panel, {

onRender:function() {

MyPanel.superclass.onRender.apply(this, arguments);

alert('Rendered');

}

});

Здесь мы добавили новую логику к Ext.Panel, теперь у нашего класса больше возможностей, чем раньше.

Во всех других случаях использовать наследование нет необходимости.

Добавление объектов к прототипу.

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







Extending Error: Object in prototype

Чего мы ожидаем ? Это написано в title панелей: Верхняя панель (p1) должна быть с синим бэкграундом, потому что мы установили ей этот параметр после того как создали объект. А у нижней панели (p2) должен быть красный бэкграунд, потому что он стоит по умолчанию в классе MyPanel.

Но она получается тоже голубой!!! Почему ? Причина проста panelConfig это объект, который создается при определении класса и он добавляется к прототипу MyPanel. Объекты (массивы тоже) доступны по ссылке, получается что p1 и p2 используют один и тот же panelConfig. Устанавливая свойство bodyBg в методе applyBackground мы изменяем panelConfig. Поэтому мы создаем панель p2 с таким же голубым цветом.

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

Жесткая привязка к id.

Очень простой, но смертельной ошибкой является жесткая привязка наследуемого класса или его items, tollbars, buttons объектов к определенному id. Если мы жестко привязываемся к определенному id, мы не сможем создать несколько экземпляров нашего класса, ведь так ?

Вместо заключения.

Это пока все, но если я найду еще какие-либо ошибки, я обязательно добавлю их выше.

Оставайтесь с нами!

Источник: http://blog.extjs.eu/know-how/writing-a-big-application-in-ext-part-3/

Не забудьте прочитать первую и вторую часть этой статьи.

Написание больших приложений на ExtJS (Часть2)

Xo66uT — Fri, 26 Mar 2010 08:11:33 +0000

Важно.

Если вы этого еще не сделали, обязательно прочитайте первую часть этой статьи. Без этого будет очень трудно объяснить (или даже невозможно), а для вас понять, что написано в этой части.

Вступление.

Прошел уже практически год, с того момента, как я опубликовал первую часть моей статьи. Я успешно использую концепцию пред настроенных классов, чтобы писать реально большие приложения (~150 .js файлов ~60000 строк кода, не считая серверного кода и .css файлов). Приложение полностью модульное, каждый класс это отдельный файл, словом мой способ доказал что он упрощает разработку, организацию кода и отладку.

К сожалению, не все было хорошо у других, кто использовал мой подход, они сталкивались с различными проблемами и Ext Support Team обрабатывали их проблемы и просьбы о помощи. Все это привело в к тому, что мой подход стали называть “абсолютная мерзость” и было сказано, что “это создает проблемы”.

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

В любом случае, есть какая-то нелогичность, что я могу использовать данный подход, а кто-то нет.

Так я стал смотреть глубже в причину ошибок и выделил некоторые из них с которыми пользователи могут столкнуться при разработке. Я также буду писать на тему “делать” или “не делать” и когда надо использовать пред настроенные классы, а когда нет. Я не буду сравнивать мой метод с другими (Метод Фабричных функций, прямой метод, загрузка по требованию и другие), потому что 1) я их не использую и 2) я не хочу превратить эту статью в очередной холивар между пользователями Linux и Windows.

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

Наиболее распространенные источники ошибок.

Бездумный копи-паст
Расширение класса базирующегося не на Ext.Component
Не вызываются родительские методы
initialConfig
Слушатели событий

Бездумные копи-пастеры.

Вы знаете этих людей ? Они пишут на форуме:

Мне нужно перетащить текст с Tree на Grid, дай pliz полный рабочий codez.

И если кто-то и альтруистов пишет им фрагмент его “codez”, чтобы помочь ему, то в ответ будет:

Твой код не работает, помоги мне, мой менеджер хочет чтобы все работало.

Вы ведите, что происходит, такой “разработчик” , получив код на форуме скопипастил его, без задней мысли, не понимая, что этот код вообще делает, может даже он не изменил URL для своего сервера, и конечно же все не работает.

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

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

Правило: Делайте копи-паст, но всегда с пониманием того, что делает код.

Расширение класса основанного не на Ext.Component.

Если класс ExtJS не наследуется от Ext.Component, функция initComponent (Инициализатор компонента), не вызывается, таким образом код, который вы напишете в этой функции никогда не будет выполнен. Вот фрагмент кода из конструктора класса Ext.Component:

this.getId();
Ext.ComponentMgr.register(this);
Ext.Component.superclass.constructor.call(this);

if(this.baseAction){
this.baseAction.addComponent(this);
}

this.initComponent();

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

Правило: Всегда проверяйте, наследуется ли класс, который вы хотите пред настроить, от класса Ext.Component. Вы должны использовать другой подход, если это не так.

Не вызываются родительские методы.

Часто случается так, что вы не только добавляете несколько методов в наследуемый класс, но так же вы изменяете уже существующие методы. initComponent – первый пример, onRender, afterLayout, и другие (но и не только они) часто переопределяемые методы.

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

// in initComponent override
YourExtension.superclass.initComponent.apply(this, arguments);

// or in onRender override
YourExtension.superclass.onRender.apply(this, arguments);

// or in afterLayout override
YourExtension.superclass.afterLayout.apply(this, arguments);

ваш класс работать не будет.

Правило: Никогда не забывайте вызвать родительский метод, если вы уверены в том, что вы делаете.

initialConfig.

Конструктор класса Ext.Component сохраняет переданный ему конфиг, как свойство initialConfig:

/**
* This Component's initial configuration specification. Read-only.
* @type Object
* @property initialConfig
*/
this.initialConfig = config;

Ext.apply(this, config);
this.addEvents(/* abbreviated for clarity */);
this.getId();
Ext.ComponentMgr.register(this);
Ext.Component.superclass.constructor.call(this);

if(this.baseAction){
this.baseAction.addComponent(this);
}

this.initComponent();

Вы видите, что происходит ? Конструктор сохраняет initialConfig до того как выполняется метод initComponent. Таким образом весь ваш конфиг написанный в методе initComponent не сохраняется. Я не заметил этого в первой версии моих шаблонов и примеров, главным образом потому, что есть всего лишь несколько классов, которые используются свойство initialConfig и даже в этих классах вызов initComponent не правильным способом, вызывает ошибку крайне редко. Следующие классы используют свойство initialConfig:

AnchorLayout
BorderLayout
Action
GridPanel
Tip
Combo
Form

Сейчас я обновил все мои примеры, расширения, шаблоны и основной сайт, чтобы включить в него этот “магический” шаблон:

// create config
var config = {
// put your config here
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
YourExtension.superclass.initComponent.apply(this, arguments);

Правило: Убедитесь, что ваш класс-потомок сохраняет свойство initialConfig.

Слушатели событий.

Если вы попытаетесь установить обработчики событий, через свойства в конфиге, они не будут работать. Почему ? Ответ опять находится в порядке выполнения действий конструктора Ext.Component:

Ext.Component.superclass.constructor.call(this);

if(this.baseAction){
this.baseAction.addComponent(this);
}

this.initComponent();

Как вы видите конструктор вызывает своего родителя, который является классом Ext.util.Observable до initComponent, а Ext.util.Observable конструктор выполняет:

Ext.util.Observable = function(){
if(this.listeners){
this.on(this.listeners);
delete this.listeners;
}
};

Таким образом любые слушатели событий в initComponent игнорируются.

Существует простой способ решить эту проблему. Положите метод конструктора класса в ваш класс потомок:

constructor:function(config) {
// parent constructor call pre-processing - configure listeners here
config = config || {};
config.listeners = config.listeners || {};
Ext.applyIf(config.listeners, {
// add listeners config here
});

// call parent constructor
AnExtension.superclass.constructor.call(this, config);

// parent constructor call post-processing

} // eo function constructor

и определяйте слушателей событий в нем.

Правило: Назначайте слушателей событий в методе-конструкторе.

Заключение.

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

Применяйте копи-паст всегда с полным пониманием того, что делает код.
Всегда проверяйте наследуется ли класс который вы хотите пред настроить от Ext.Component. Вы должны использовать другой подход, если это не так.
Никогда не забывайте вызвать родительский метод, если вы уверены в том, что делаете.
Убедитесь что ваш класс сохраняет свойство initialConfig.
Назначайте слушателей событий в методе-конструкторе.

Удачного наследования!

Источник: http://blog.extjs.eu/know-how/writing-a-big-application-in-ext-part-2/

Написание больших приложений на ExtJS (Часть1)

Xo66uT — Wed, 24 Mar 2010 09:41:48 +0000

Предисловие

Я решил написать эту статью для тех пользователей Ext 2.x, которые уже выросли из приложений состоящих из одной HTML страницы со встроенным скриптом, который создает одно простое окно или форму, для тех, кто уже решили, что Ext это их выбор и для тех, кто борется со слишком большими файлами, где трудно что-то найти и тех, кто чувствует, что их приложения требуют структуры.

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

Я только хочу сказать, что мой подход, позволяет легко структурировать и писать красивый код. Он “реально работает”!

Что можно назвать большим приложением ?

Если у вас есть Viewport с BorderLayout, grid и формы – все в одном файле, это конечно, небольшое приложение. А вот если у вас десятки окон с формами, гридами и все это в 10 файлах, это уже не маленькое приложение, правда ?

(У немцев есть забавное выражение Jein, которое является производным от Ja = Да и Nein = Нет )

Ответ на вопрос поставленный выше это Jein (Прим. переводчика: Русское Да-нет наверное тоже является эквивалентом этого немецкого слова). Нет однозначного ответа, когда приложение становится большим, оно становится большим, когда вы считаете, что оно стало большим. Этот момент обычно наступает, когда вы уже не можете ориентироваться в ваших файлах, когда вы перестаете понимать как ваши компоненты в приложении соотносятся друг с другом. Нужно также представлять что будет, если с вашим кодом начнет работать программист в 2 -3 раза менее опытный чем вы.

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

Самое лучше – начинать писать приложение со словами: “Я начинаю писать большое приложение!”.

Файлы и папки.

Это необходимо организовать в первую очередь. Нужно всегда начинать с ServerRoot директории настроенной в Apache или каком-нибудь другом HTTP сервере, все описанные далее папки идут относительно нее.

. /css(опционально ссылка)

. /ext (ссылка)

. /img (ссылка)

. /js

index.html

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

* css будет содержать все ваши таблицы стилей. Если у вас есть глобальные таблицы стилей с фирменными цветами и шрифтами можно создать в CSS каталоге ссылку.

* ext ссылки на дерево ExtJS библиотек разных версий.

* img ссылки на изображения. Он может содержать также подкаталоги.

* js будет содержать все скрипты вашего приложения.

* index.html файл HTML, который является отправной точкой вашего приложения. Вы можете назвать его как хотите, и вам может понадобиться еще несколько файлов, например, для авторизации.

* По желанию, вы можете создать директорию или ссылку на ваши серверные скрипты (у меня есть. / classes).

(Прим.Переводчика: ссылки для Linux).

index.html

Примерное минимальное содержимое файла index.html выглядит следующим образом:


















A Big Application

application.js

Нам нужен файл в котором будет размещена функция onReady, давайте назовем его application.js. Минимальное содержание выглядит так:


/**

* An Application

*

* @author    Ing. Jozef Sakáloš

* @copyright (c) 2008, by Ing. Jozef Sakáloš

* @date      2. April 2008

* @version   $Id$

*

* @license application.js is licensed under the terms of the Open Source

* LGPL 3.0 license. Commercial use is permitted to the extent that the

* code/component(s) do NOT become part of another Open Source or Commercially

* licensed development library or toolkit without explicit permission.

*

* License details: http://www.gnu.org/licenses/lgpl.html

*/

/*global Ext, Application */

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

Ext.ns('Application');

// основная точка входа нашего приложения

Ext.onReady(function() {

Ext.QuickTips.init();

Здесь будет код вызова основного класса приложения

});

// eof

Ваш header и footer может быть различным, но уверен, вы должны установить параметр Ext.BLANK_IMAGE_URL, чтобы он указывал на картинку на локальном сервере. Это путь к 1 × 1px прозрачной картинке, которая используется Ext для пустых областей, если параметр указывает на неправильное место, у вас могут возникнуть различные проблемы – такие, как отсутствие изображения-переключателя у Combobox, либо отсутствие иконок.

Вам также может понадобиться создать новую глобальную переменную-объект для приложения (в данном случае это Application).

Вы должны быть уверены, что Ext.onReady, это начало вашего приложения – место, где вы пишете его инициализацию.

css/application.css

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