Viewport With Accordion In Center

By Vitaliy on April 26, 2012. ExtJS 4.1.0
4181
Reply to thread

Js Code

Ext.widget({
	xtype: 'viewport',
	layout: 'border',
	items: [
		{
			title: 'north',
			region: 'north',
			margins: '5 5 0 5',
			height: 100
		},
		{
			region: 'west',
			title: 'west',
			margins: '5 0 5 5',
			width: 250,
			split: true
		},
		{
			title: 'center',
			region: 'center',
			margins: '5 5 5 0',
			layout: 'accordion',
			defaults: {
				bodyPadding: 10
			},
			items: [
				{
					xtype: 'panel',
					title: 'Panel 1',
					html: 'Html content 1'
				},
				{
					xtype: 'panel',
					title: 'Panel 2',
					html: 'Html content 2'
				},
				{
					xtype: 'panel',
					title: 'Panel 3',
					html: 'Html content 3'
				}
			]
		}
	]
});    

ExtJS 4 MVC: Implementing Dynamic Tabs

By Vitaliy on March 19, 2012. ExtJS 4.0.7
4777
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	refs: [
		{ ref: 'tabs', selector: 'viewport > #tabs' }
	],
	init: function () {
		this.control({
			'viewport > #nav': {
				itemclick: this.onMenuItemClick
			}
		});
	},
	onMenuItemClick: function (view, rec) {
		if (!rec.raw || !rec.raw.panel) return;

		var id = rec.raw.panel;
		var cls = "App.view." + id;
		var tabs = this.getTabs();
		var tab = tabs.child('#' + id);

		if (!tab) {
			tab = tabs.add(Ext.create(cls, {
				itemId: id,
				title: rec.get('text')
			}));
		}
		tabs.setActiveTab(tab);
	}
});    

A Little Bit Strange Navigation

By Vitaliy on March 17, 2012. ExtJS 4.0.7
3950
Reply to thread

Js Code

Ext.define('App.view.Viewport', {
	extend: 'Ext.container.Viewport',
	layout: 'border',
	items: [
		{
			itemId: 'menu',
			region: 'west',
			collapsible: true,
			title: 'Menu',
			width: 200,
			items: [
				{
					xtype: 'panel',
					height: 110,
					padding: '10 10 25 10',
					width: 200,
					collapsible: true,
					title: 'Company Information',
					items: [
						{
							xtype: 'button',
							height: 27,
							style: 'margin-left:30px;margin-top:12px;\n',
							width: 128,
							text: 'Company',
							action: 'company-view'
						}
					]
				},
				{
					xtype: 'panel',
					height: 110,
					padding: '10 10 25 10',
					width: 200,
					collapsible: true,
					title: 'Department Information',
					items: [
						{
							xtype: 'button',
							height: 27,
							style: 'margin-left:30px;margin-top:12px;\n',
							width: 128,
							text: 'Department',
							action: 'department-view'
						}
					]
				},
				{
					xtype: 'panel',
					height: 110,
					padding: '10 10 25 10',
					width: 200,
					collapsible: true,
					title: 'Designation Information',
					items: [
						{
							xtype: 'button',
							height: 27,
							style: 'margin-left:30px;margin-top:12px;',
							width: 128,
							text: 'Designation',
							action: 'designation-view'
						}
					]
				}
			],
			margins: '5 0 5 5'
		},
		{
			itemId: 'cards',
			region: 'center',
			margins: '5 5 5 5',
			border: false,
			layout: 'card',
			defaults: { bodyPadding: 10 },
			items: [
				{
					title: 'Company Information',
					itemId: 'company-view',
					html: 'Company Information Details'
				},
				{
					title: 'Department Information',
					itemId: 'department-view',
					html: 'Department Information Details'
				},
				{
					title: 'Designation Information',
					itemId: 'designation-view',
					html: 'Designation Information Details'
				}
			]
		}
	]
});    

ExtJS 4 MVC With Viewport

By Vitaliy on March 15, 2012. ExtJS 4.0.7
4318

Js Code

//app/view/Viewport.js
Ext.define('Buks.view.Viewport', {
	extend: 'Ext.container.Viewport',
	layout: 'border',
	requires: [
		'Buks.view.Panelcenter',
		'Buks.view.Emailpanel',
		'Buks.view.Phonepanel'
	],
	//Error: it was initComponents
	initComponent: function () {
		Ext.apply(this, {
			items: [{
				xtype: 'pcenter',
				title: 'center',
				region: 'center',
				margins: '5 5 5 5'
			},
			{
				xtype: 'empanel',
				title: 'south',
				region: 'south',
				height: 150,
				margins: '0 5 5 5'
			},
			{
				xtype: 'phPanel',
				title: 'east',
				region: 'east',
				width: 150,
				margins: '5 5 5 0'
			}]
		});
		//Error: do not forget this line in each initComponent method
		this.callParent(arguments);
	}
});    

Viewport Example

By Vitaliy on March 15, 2012. ExtJS 4.0.7
3507
Viewport is a specialized container representing the viewable application area (the browser viewport). The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

Js Code

Ext.create('Ext.container.Viewport', {
	layout: 'border',
	items: [
		{
			region: 'north',
			title: 'Page Title',
			html: 'Information goes here',
			bodyPadding: 10,
			height: 100,
			margins: '5 5 5 5'
		},
		{
			// could use a TreePanel or AccordionLayout for navigational items
			region: 'west',
			collapsible: true,
			title: 'Navigation',
			width: 150,
			margins: '0 5 0 5'
		},
		{
			region: 'south',
			title: 'South Panel',
			collapsible: true,
			html: 'Information goes here',
			bodyPadding: 10,
			split: true,
			height: 100,
			minHeight: 100,
			margins: '0 5 5 5'
		},
		{
			region: 'east',
			title: 'East Panel',
			collapsible: true,
			split: true,
			width: 200,
			margins: '0 5 0 0'
		},
		{
			region: 'center',
			xtype: 'tabpanel',	// TabPanel itself has no title
			activeTab: 0,		// First tab active by default
			items: {
				title: 'Default Tab',
				html: 'The first tab\'s content. Others may be added dynamically',
				bodyPadding: 10
			}
		}
	]
});