Меню и тулбары в Ext JS 6

Ext JS позволяет в принципе делать меню и тулбары любых видов. Для построения тулбаров используйте Ext.toolbar.Toolbar. По умолчанию все дочерние элементы Ext.toolbar.Toolbar являются кнопками, но можно добавлять и другие компоненты: текстовые поля, числовые поля, иконки, выпадающие списки и т.д.

Для разделения элементов в тулбаре можно использовать Ext.toolbar.Spacer (пустое пространство), Ext.toolbar.Separator (разделитель) и  Ext.toolbar.Fill (right-justified button container). Можно использовать сокращения ' ' (space), '|' (pipe), и '->' (arrow).

Ext.menu.Menu используется для построения меню из элементов Ext.menu.Item.
Ext.create('Ext.toolbar.Toolbar', {
 renderTo: Ext.getBody(),
 width: 800,
 items: [
  { text: 'My Button' },
  {
    text: 'My Button',
    menu: [{text: 'Item 1'}, {text: 'Item 2'}, {text: 'Item 3'}]
  },
  {
    text: 'Menu with divider',
    tooltip: {text: 'Tooltip info', title: 'Tip Title'},
    menu: {
     items: [{
      text: 'Task 1',
      // handler: onItemClick
     }, '-', {
      text: 'Task 2',
      // handler: onItemClick
     }, {
      text: 'Task 3',
      // handler: onItemClick
     }]
    }
 },
 '->',
 {
  xtype: 'textfield',
  name: 'field1',
  emptyText: 'search web site'
 },
 '-',
 'Some Info',
 {
  xtype: 'tbspacer'
 },
 {
  name: 'Count',
  xtype: 'numberfield',
  value: 0,
  maxValue: 10,
  minValue: 0,
  width: 60
 }
 ]
});


Теги: