Тулбар
Для создания различных панелей с инструментами и меню в ExtJS предназначен класс Ext.toolbar.Toolbar. Например:
Ext.onReady(function(){
Ext.create('Ext.toolbar.Toolbar', {
renderTo: Ext.getBody(),
width : 400,
items: [
{
text: 'Кнопка'
},'-',{
xtype: 'splitbutton',
text : 'Кнопка с меню'
},'->',{
xtype : 'textfield',
name : 'field',
emptyText: 'Найти'
}]
});
});
Элемент тулбар принимает массив items, в котором мы можем определить другие компоненты. Все компоненты располагаются друг за другом в том
порядке, в котором они находятся в массиве.
Но также мы можем использовать специальные разделители, чтобы отделить элементы друг от друга. В данном случае мы использовали два разделителя: ''-' и '->'. Разделитель '-' представляет класс Ext.toolbar.Separator. В визуальном плане он создает вертикальную черточку-разделитель.
Второй разделитель '->' представляет компонент Ext.toolbar.Fill, который растягивается по всей ширине тулбара, которая осталась после вычитания ширины всех остальных его компонентов.
Кроме того, мы можем применить еще один разделитель - ' ' обычный пробел, который представляет класс Ext.toolbar.Spacer и визуально также создает пробел между элементами.
Используя свойство dockItems, мы можем прикрепить тулбар к определенной стороне панели. Также мы можем использовать
свойства панели как tbar, bbar:
Ext.onReady(function(){
var toolbar=Ext.create('Ext.toolbar.Toolbar', {
dock: 'left',
items: [
{
text: 'Кнопка'
},{
xtype: 'splitbutton',
text : 'Кнопка с меню'
},'->',{
xtype : 'textfield',
name : 'field',
emptyText: 'Найти'
}]
});
Ext.create('Ext.panel.Panel', {
title: 'Панель с тулбаром',
width: 350,
height: 150,
renderTo: Ext.getBody(),
dockedItems: [toolbar]
});
});
