PHP5

Ext.Button

Класс Ext.Button представляет кнопку:

Ext.onReady(function(){
	Ext.create('Ext.Button', {
		text: 'Нажми',
		height:30,
		margin: '50 0 0 50',
		renderTo: Ext.getBody(),
		handler: function() {
			alert('Привет мир!')
		}
	});
});

Для использования кнопок внутри контейнера мы можем использовать xtype button:

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
		width:300,
		height:200,
		renderTo: Ext.getBody(),
		items   : [{
				xtype: 'button',
				text : 'My Button',
				margin:'75 0 0 125',
				enableToggle: true
			}]
	});
});

Используя в вышеприведенном примере свойство enableToggle: true, при нажатии на кнопку она оказывается во включенном состоянии и выделяется цветом, при повторном нажатии мы снимаем включение.

Используя свойство menu, мы можем задать для кнопки меню:

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
		width:300,
		height:200,
		renderTo: Ext.getBody(),
		items   : [{
				xtype: 'button',
                text : 'Языки программирования',
                margin:'15 0 0 25',
                menu: [
                    {text: 'C#'},
                    {text: 'Java'},
                    {text: 'C++'},
                    {text: 'Basic'}
                ]
			}]
	});
});

В первом примере мы устанавливали у кнопки свойство handler, которое определяет функцию, отрабатываемую при нажатии кнопки. Но мы также можем использовать свойство listeners и установить в нем обработчики других событий или слушатели:

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
		width:300,
		height:200,
		renderTo: Ext.getBody(),
		items   : [{
				xtype: 'button',
				text : 'My Button',
				margin:'15 0 0 25',
				listeners: {
					click: function() { // аналогичен функции в параметре handler
						// this в данном случае хранит ссылку на текущую кнопку
						this.setText('Привет мир');
					},
					mouseover: function() {// обработчик наведения курсора
						// если параметр установлен
						if (!this.mousedOver) {
							this.mousedOver = true;
							alert('Вы навели курсором на элемент!\n\nБольше сообщение не будет появляться.');
						}
					}
			}
			}]
	});
});