Тулбар представлен классом Ext.toolbar.Toolbar Рассмотрим простой пример тулбара
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Ext.onReady(function(){ Ext.create('Ext.toolbar.Toolbar', { renderTo: Ext.getBody(), width : 700, items: [ { xtype:'button', text: 'Button', listeners:{ click:function(){alert('Вы только что нажали на кнопку');} } },'-', // Вертикальный сепаратор { xtype: 'splitbutton', text : 'Кнопка с меню' },'->', // Отодвигает все элементы вправо { xtype : 'textfield', name : 'Myfield', emptyText: 'Search' }] }); }); |
Вообще говоря в документации есть интересная информация о символах сокращения
| Shortcut | xtype | Class | Description |
|---|---|---|---|
| ‘->’ | tbfill |
Ext.toolbar.Fill | begin using the right-justified button container |
| ‘-‘ | tbseparator |
Ext.toolbar.Separator | add a vertical separator bar between toolbar items |
| ‘ ‘ | tbspacer |
Ext.toolbar.Spacer | add horizontal space between elements |
По символу ‘->’ поясню. Все элементы после указания этого символа отодвигаются максимально вправо. По остальным, думаю, очевидно, ‘-‘ это сокращенно – вертикальный разделитель, а символ ” просто пробел между элементами.