Implement tab bar (50a6044d) · Commits · extjs / jsduck

template/app/Application.js

+3 −2

Original line number	Diff line number	Diff line
		@@ -23,7 +23,8 @@ Ext.define('Docs.Application', {
		'Classes',
		'Search',
		'Examples',
		'Favorites'
		'Favorites',
		'Tabs'
		],

		launch: function() {
		@@ -52,7 +53,7 @@ Ext.define('Docs.Application', {
		}

		setInterval(function(){
		Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 1000)
		Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		}, 1000)
		}

template/app/controller/Classes.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -239,7 +239,7 @@ Ext.define('Docs.controller.Classes', {

		this.currentCls = cls;

		this.getFavoritesGrid().selectUrl("/api/"+cls.name);
		// this.getFavoritesGrid().selectUrl("/api/"+cls.name);
		},

		/**

template/app/controller/Tabs.js

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		Ext.define('Docs.controller.Tabs', {
		extend: 'Ext.app.Controller',

		init: function() {
		this.control({
		'container [componentCls=doctabs]': {
		afterrender: function(cmp) {
		cmp.el.addListener('click', function(event, el) {
		Ext.Array.each(Ext.get(el).up('.doctabs').query('.doctab'), function(t) {
		Ext.get(t).removeCls('active');
		});
		Ext.get(el).addCls('active')
		}, this, {
		delegate: '.doctab'
		});
		}
		}
		});
		}

		});

template/app/view/Tabs.js

0 → 100644

+56 −0

Original line number	Diff line number	Diff line
		Ext.define('Docs.view.Tabs', {
		extend: 'Ext.container.Container',

		componentCls: 'hover-menu',
		itemSelector: 'div.item',
		deferEmptyText: false,

		/**
		* @cfg {Number} colHeight maximum number of items in one column.
		* When more than that, items are placed into multiple columns.
		* Defaults to 25 (current maximum length of history).
		*/
		columnHeight: 25,
		/**
		* @cfg {Boolean} showCloseButtons true to show "x" after each menu item.
		* Defaults to false.
		*/
		showCloseButtons: false,

		initComponent: function() {
		this.renderTo = Ext.getBody();

		this.tpl = new Ext.XTemplate(
		'<table>',
		'<tr>',
		'<td>',
		'<tpl for=".">',
		'<div class="item">',
		'{[this.renderLink(values)]}',
		'<tpl if="this.showCloseButtons">',
		'<a class="close" href="#" rel="{cls}">x</a>',
		'</tpl>',
		'</div>',
		// Start new column when columnHeight reached
		'<tpl if="xindex % this.columnHeight === 0 && xcount > xindex">',
		'</td><td>',
		'</tpl>',
		'</tpl>',
		'</td>',
		'</tr>',
		'</table>',
		{
		columnHeight: this.columnHeight,
		showCloseButtons: this.showCloseButtons,
		renderLink: function(values) {
		var url = values.url \|\| values.cls;
		var label = values.label \|\| values.cls;
		var stat = values['static'] ? '<span class="static">static</span>' : "";
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1} {2}</a>', url, label, stat);
		}
		}
		);

		this.callParent();
		}
		});

template/app/view/Viewport.js

+14 −9

Original line number	Diff line number	Diff line
		@@ -25,7 +25,7 @@ Ext.define('Docs.view.Viewport', {
		{
		region: 'north',
		id: 'north-region',
		height: 67,
		height: 65,
		width: '100%',
		layout: 'vbox',
		items: [
		@@ -70,15 +70,20 @@ Ext.define('Docs.view.Viewport', {
		},
		{
		xtype: 'container',
		componentCls: 'doctabs',
		width: '100%',
		html: [
		'<div style="background: url(resources/images/tabsDELETE.png) no-repeat -1px 0; width: 900px; height: 30px">',
		'<div class="doctabs">',
		'<div class="doctab"><div class="l"></div><div class="m">Base</div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m">Grid</div><div class="r"></div></div>',
		'<div class="doctab active"><div class="l"></div><div class="m">Ajax</div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m">Panel</div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m">ComboBox</div><div class="r"></div></div>',
		'</div>'
		'<div class="doctab home"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab api"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab videos"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab guides"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab themes"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div style="position: relative; display: inline-block; width: 8px"></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-class" href="#/api/Ext.Base">Base</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.grid.Panel">Grid</a></div><div class="r"></div></div>',
		'<div class="doctab active"><div class="l"></div><div class="m"><a class="icon-singleton" href="#/api/Ext.Ajax">AJAX</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.panel.Panel">Panel</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.form.field.ComboBox">ComboBox</a></div><div class="r"></div></div>'
		].join('')
		}
		]