How To Place Items On Toolbar In Two Lines?

Posted By Vitaliy | March 22, 2012 | ExtJS 4.0.7
0 4543
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: Ext.getBody()
});

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: Ext.getBody()
});
            

Form Panel Buttons Alignment

Posted By Vitaliy | March 22, 2012 | ExtJS 4.0.7
0 3775
Reply to thread

Js Code

Ext.create('Ext.form.Panel', {
	width: 600,
	frame: true,
	title: 'Simple Form',
	padding: 10,
	fieldDefaults: {
		msgTarget: 'side',
		labelWidth: 75
	},
	defaultType: 'textfield',
	defaults: {
		anchor: '100%'
	},
	items: [
		{
			fieldLabel: 'First Name',
			name: 'first',
			allowBlank: false
		},
		{
			fieldLabel: 'Last Name',
			name: 'last',
			allowBlank: false
		}
	],
	dockedItems: [{
		xtype: 'toolbar',
		padding: '2 0 2 0',
		dock: 'bottom',
		ui: 'footer',
		items: [
			{
				text: 'Button Left 1'
			},
			{
				text: 'Button Left 2'
			},
			{
				xtype: 'tbfill'
			},
			{
				text: 'Button Right 1'
			},
			{
				text: 'Button Right 2'
			}
		]
	}],
	renderTo: Ext.getBody()
});
            

Window FAQ: Window With Toolbars

Posted By Vitaliy | March 21, 2012 | ExtJS 4.0.7
0 2330
Config option "tbar": Convenience config. Short for 'Top Bar'.
Config option "bbar": Convenience config. Short for 'Bottom Bar'.

Js Code

Ext.widget('window', {
	title: 'Test Window',
	html: 'Click on button',
	width: 300,
	height: 200,
	bodyPadding: 10,
	tbar: [
		{
			text: 'tbar button',
			handler: function () {
				this.up('window').update('Top Bar button clicked');
			}
		}
	],
	bbar: [
		{
			text: 'fbar button',
			handler: function () {
				this.up('window').update('Bottom Bar button clicked');
			}
		}
	],
	bodyStyle: { 'background-color': 'white' },
	html: 'Some <b>HTML</b> content here!',
	autoShow: true
});
            

Dynamic Fieldset Add/Remove

Posted By Vitaliy | March 17, 2012 | ExtJS 4.0.7
0 4451
Reply ro thread

Js Code

Ext.create('Ext.form.Panel', {
	title: 'Form with Dynamic FieldSets',
	bodyPadding: 10,
	width: 550,
        height: 300,
	autoScroll: true,
	renderTo: Ext.getBody(),
	tbar: [
		{
			text: 'Add FiŽŸeldSet',
			handler: function () {
				this.up('form').add(Ext.widget('closablefieldset', {
					columnWidth: 0.5,
					title: 'Test Fieldset',
					collapsible: true,
					defaultType: 'textfield',
					defaults: { anchor: '100%' },
					layout: 'anchor',
					items: [
						{
							fieldLabel: 'Field 1',
							name: 'field1'
						},
						{
							fieldLabel: 'Field 2',
							name: 'field2'
						}
					]
				}));
			}
		}
	],
	items: [
		{
			xtype: 'closablefieldset',
			columnWidth: 0.5,
			title: 'Test Fieldset',
			collapsible: true,
			defaultType: 'textfield',
			defaults: { anchor: '100%' },
			layout: 'anchor',
			items: [
				{
					fieldLabel: 'Field 1',
					name: 'field1'
				},
				{
					fieldLabel: 'Field 2',
					name: 'field2'
				}
			]
		}
	]
});
            

How To Dynamically Add Tabs To TabPanel

Posted By Vitaliy | March 16, 2012 | ExtJS 4.0.7
0 4291
Reply to thread

Js Code

Ext.create('Ext.tab.Panel', {
	width: 300,
	height: 150,
	defaults: { bodyPadding: 10 },
	items: [
		{
			title: 'Tab 1',
			html: 'Tab 1 content'
		}
	],
	fbar: [
		{
			text: 'Add Tab',
			handler: function () {
				var tabs = this.up('tabpanel');
				var count = tabs.items.getCount();
				var tab = tabs.add(Ext.widget('panel', {
					title: 'New Tab ' + count,
					html: 'Html ' + count
				}));
				tabs.setActiveTab(tab);
			}
		}
	],
	renderTo: Ext.getBody()
});