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

5 Распространенных мифов о Javascript

Xo66uT — Wed, 05 May 2010 11:36:39 +0000

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

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/

JavaScript

Раширение классов в 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.

Написание больших приложений на 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 стили в этом файле. Если вам нужно всего лишь несколько правил, то может показаться, что нет необходимости создавать отдельный файл для них, и что это хорошая идея положить их в тег