/** * @class Ext.Toolbar * @extend Ext.Container * @xtype toolbar * * {@link Ext.Toolbar}s are most commonly used as docked items as within a * {@link Ext.Container}. They can be docked either `top` or `bottom` using the * {@link #docked} prop. * * They allow you to insert items (normally {@link Ext.Button buttons}) and also add a {@link #title}. * * The {@link #defaultType} of {@link Ext.Toolbar Toolbar} is {@link Ext.Button}. * * You can alternatively use {@link Ext.TitleBar TitleBar} if you want the title to automatically * adjust the size of its items. * * ## Example * * @example packages=[reactor] * import React, { Component } from 'react'; * import { ExtReact, Toolbar, Panel, Button, SegmentedButton, Spacer, SearchField } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtReact> * <Panel shadow bodyPadding={0}> * <Toolbar docked="top"> * <Button text="Default" badgeText="2"/> * <Spacer/> * <SegmentedButton> * <Button text="Option 1" pressed/> * <Button text="Option 2"/> * </SegmentedButton> * <Spacer/> * <Button ui="action" text="Action"/> * </Toolbar> * Some Text! * </Panel> * </ExtReact> * ) * } * } */ /** * @cfg {String/Ext.Title} [title=null] * The title of the toolbar. * @accessor */ /** * @cfg {String} [defaultType='button'] * The default xtype to create. * @accessor */ /** * @cfg {String} [defaultButtonUI=null] * A default {@link Ext.Component#ui ui} to use for {@link Ext.Button Button} items. */ /** * @cfg {String} docked * The docked position for this {@link Ext.Toolbar}. * If you specify `left` or `right`, the {@link #layout} prop will automatically * change to a `vbox`. It's also recommended to adjust the {@link #width} of the * toolbar if you do this. * @accessor */ /** * @cfg {Number/String} [minHeight=null] * The minimum height height of the Toolbar. * @accessor */ /** * @cfg {Object/String} layout * * layout prop for this Container's layout. * * __Note:__ If you set the {@link #docked} prop to `left` or `right`, the default * layout will change from the `hbox` to a `vbox`. * * @accessor */