How To Place Items On Toolbar In Two Lines?

By Vitaliy on March 22, 2012. ExtJS 4.0.7
3559
Reply to thread

Js Code

Ext.create('Ext.panel.Panel', {
	title: 'Two top docked toolbars',
	width: 400,
	height: 150,
	dockedItems: [
		{
			xtype: 'toolbar',
			dock: 'top',
			items: [
				{
					xtype: 'textfield',
					name: 'searchField',
					hideLabel: true,
					width: 200
				},
				{
					xtype: 'button',
					text: '<',
					tooltip: 'Find Previous Row'
				},
				{
					xtype: 'button',
					text: '>',
					tooltip: 'Find Next Row'
				}
			]
		},
		{
			xtype: 'toolbar',
			dock: 'top',
			items: [
				{
					xtype: 'checkbox',
					hideLabel: true,
					margin: '0 0 0 4px'
				},
				{
					xtype: 'checkbox',
					hideLabel: true,
					margin: '0 0 0 4px'
				}
			]
		}
	],
	renderTo: 'output'
});

Ext.create('Ext.panel.Panel', {
	title: 'Multiline toolbar',
	width: 400,
	height: 150,
	margin: '5 0 0 0',
	dockedItems: [
		{
			xtype: 'toolbar',
			dock: 'top',
			layout: {
				type: 'vbox',
				align: 'stretch'
			},
			height: 52,
			items: [
				{
					xtype: 'container',
					layout: {
						type: 'hbox',
						align: 'middle'
					},
					items: [
						{
							xtype: 'textfield',
							name: 'searchField',
							hideLabel: true,
							width: 200
						},
						{
							xtype: 'button',
							text: '<',
							tooltip: 'Find Previous Row'
						},
						{
							xtype: 'button',
							text: '>',
							tooltip: 'Find Next Row'
						}
					]
				},
				{
					xtype: 'container',
					layout: {
						type: 'hbox',
						align: 'middle'
					},
					items: [
						{
							xtype: 'checkbox',
							hideLabel: true,
							margin: '0 0 0 4px'
						},
						{
							xtype: 'checkbox',
							hideLabel: true,
							margin: '0 0 0 4px'
						}
					]
				}
			]
		}
	],
	renderTo: 'output'
});