Viewport With Accordion In Center

Posted By Vitaliy | April 26, 2012 | ExtJS 4.1.0
0 5401
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

Posted By Vitaliy | March 19, 2012 | ExtJS 4.0.7
0 6106
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

Posted By Vitaliy | March 17, 2012 | ExtJS 4.0.7
1 5048
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

Posted By Vitaliy | March 15, 2012 | ExtJS 4.0.7
0 5390
​Reply to Viewport.js error in mvc extjs4

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

Posted By Vitaliy | March 15, 2012 | ExtJS 4.0.7
0 4403
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
			}
		}
	]
});