Ext JS | Панель с тремя кнопками

Файл «app.js«

var button1 = Ext.create('Ext.Button', {
  title: 'button1 title',
  //html: 'button1 html',
  text: 'btn1txt',
  width: 100,
  height: 50
});

var button2 = Ext.create('Ext.Button', {
  title: 'button2 title',
  //html: 'button2 html',
  text: 'btn2txt',
  width: 100,
  height: 50
});

var button3 = Ext.create('Ext.Button', {
  title: 'button3 title',
  //html: 'button3 html',
  text: 'btn3txt',
  width: 100,
  height: 50
});

var panel_b = Ext.create('Ext.Panel', {
  title: 'panel_b title',
  width: 500,
  height: 200,
  renderTo: 'panelbtns',
  items: [ button1, button2, button3 ]
});

Одна панель, а внутри три кнопки.

Файл «index.html«

<div id="panelbtns"></div>

Обычный блок DIV.

Итоговый вид в приложении

Мы создали стандартную Панель (Panel) и вложили в неё три стандартные Кнопки (Button) в Ext JS. Для различий между кнопками мы использовали ключ «text«, чтобы написать метку для каждой кнопки. По умолчанию цвет текста кнопки синий.