Ext.Button

Ext.Button самый часто используемый компонент.



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

Ext.create('Ext.Button', {
 text: 'My Button',
 renderTo: Ext.getBody(),
 handler: function() {
 alert('click');
 }
});

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

Ext.create('Ext.Button', {
 text: 'My Button',
 renderTo: Ext.getBody(),
 listeners: {
 click: {
 fn: function(){
 //Handle click event
 alert('click');
 }
 },
 mouseout: {
 fn: function(){
 //Handle double click event
 alert('Mouse out');
 }
 }
 }
});

Можно создавать разные кнопки: кнопку-ссылку, кнопку-меню, кнопку-переключатель.

Пример ссылки:

Ext.create('Ext.Button', {
 renderTo: Ext.getBody(),
 text: 'Link Button',
 href: 'http://www.sencha.com/'
});

Пример кнопки с меню:

Ext.create('Ext.Button', {
 text: 'My Button',
 renderTo: Ext.getBody(),
 menu: [{
 text: 'Item 1'
 }, {
 text: 'Item 2'
 }, {
 text: 'Item 3'
 }]
});

У Ext.Button есть много других свойств для кастомизации: bind, cls, disabled, html, tooltip, tpl.