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

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