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

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