Создаём HTML-компоненты в ExtJs 5.1

Спектр компонентов, которые ExtJs 5 предоставляет нам "из коробки", довольно обширен. Тем не менее иногда необходимо создать собственный компонент.

1. Создаём класс 'MyComponent' для нашего компонента.

Ext.define('MyApp.view.MyComponent', {});


2. Наследуемся от Ext.Component

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component'
});

Subclassing

3. Обозначаем псевдоним 'my-component' класса, чтобы иметь возможность подключать наш компонент через xtype в состав контейнеров.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component'
});

XTypes and Lazy Instantiation

4. Определяем HTML-шаблон:

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component',
    tpl: [
        '<div class="my-wrapper">',
        '<div class="my-content">{content}</div>',
        '</div>'
    ]
});



Ext.Component.tpl
Ext.XTemplate


5. Добавим к компоненту свойство 'myWrapper', которое будет предоставлять доступ к элементу внутри компонента.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component',
    tpl: [
        '<div class="my-wrapper">',
        '<div class="my-content">{content}</div>',
        '</div>'
    ],
    childEls: {
        myWrapper: {
             selectNode: '.my-wrapper'
        }
    }

});

data-ref
Ext.Component.childEls
Ext.util.ElementContainer
Ext.Element

6. Заполняем шаблон исходными данными. Обязательно нужно предоставить набор дефолтных значений, которые позволят заполнить шаблон. Если опустить параметр data, то дочерние элементы (childEls) будут равны null.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component',
    tpl: [
        '<div class="my-wrapper">',
        '<div class="my-content">{content}</div>',
        '</div>'
    ],
    childEls: {
        myWrapper: {
             selectNode: '.my-wrapper'
        }
    },
    data: {
         content: 'bla bla bla'
    }
});

Ext.Component.data

7. Назначим обработчик события click в элементе myWrapper нашего компонента. Важно использовать метод-шаблон afterRender.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component',
    tpl: [
        '<div class="my-wrapper">',
        '<div class="my-content">{content}</div>',
        '</div>'
    ],
    childEls: {
        myWrapper: {
             selectNode: '.my-wrapper'
        }
    },
    data: {
         content: 'bla bla bla'
    },
    afterRender: function() {
        this.callParent(arguments);
        this.myWrapper.on('click', function() {
            this.fireEvent('click', this);
        }, this);
    }
});

Template Methods

Работающий пример в Fiddle. Щёлкаем по bla bla bla, и надпись меняется на ups!

Что нужно учитывать? Во-первых, свойство data лучше определить внутри шаблонного метода initComponent. Во вторых, после заполнения шаблона методом update DOM-элементы создаются заново, поэтому придётся заново определить обработчики DOM-событий, в связи с чем есть смысл завести для этой цели отдельную функцию. В-третьих, обновлять шаблон нужно полным набором данных.

Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.my-component',
    tpl: [
        '<div class="my-wrapper">',
        '<div class="my-content">{content}</div>',
        '</div>'
    ],
    childEls: {
        myWrapper: {
             selectNode: '.my-wrapper'
        }
    },
    data: {
         content: 'bla bla bla'
    },
    afterRender: function() {
        this.callParent(arguments);
        this.setMyListeners(); // 2 
    },
    initComponent: function() {
        this.data.content = 'lalala'; // 1
        this.update(this.data); // 3
        this.setMyListeners(); // 2
        this.callParent(arguments);
    },
    setMyListeners: function() { // 2
        this.myWrapper.on('click', function() {
            this.fireEvent('click', this);
        }, this);
    } 
});


Чтобы вносить изменения в щедящем режиме, используем this.getEl().

this.getEl().down('form').dom.setAttribute('action', url);
 
this.getEl().down('iframe').addListener(
    'load', 
    function(event, iframe) {
        //...
     }
);

Ещё заглянем в код библиотеки, посмотрим, как сделано там.

FileButton Code


Хорошее объяснение на английском