Start of MVC conversion (58bb91e7) · Commits · extjs / jsduck

template/app.js

0 → 100644

+13 −0

Original line number	Diff line number	Diff line
		Ext.application({
		name: 'Docs',

		appFolder: 'app',

		controllers: [
		'Classes'
		],

		launch: function() {
		Ext.create('Docs.view.Viewport')
		}
		});
		No newline at end of file

template/app/controller/Classes.js

0 → 100644

+168 −0

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

		views: [
		'class.List',
		'class.Tree'
		],

		init: function() {

		this.control({
		'#treePanelCmp': {
		itemclick: this.treeItemClick
		},

		'#classlist': {
		afterrender: function(cmp) {

		cmp.el.addListener('click', function(cmp, el) {
		this.showGuide(el.rel);
		}, this, {
		preventDefault: true,
		delegate: '.guide'
		});
		}
		},

		'#doc-overview': {
		afterrender: function(cmp) {

		// Expand member when clicked
		cmp.el.addListener('click', function(cmp, el) {
		Ext.get(Ext.get(el).up('.member')).toggleCls('open');
		}, this, {
		preventDefault: true,
		delegate: '.expandable'
		});

		// Do nothing when clicking on not-expandable items
		cmp.el.addListener('click', Ext.emptyFn, this, {
		preventDefault: true,
		delegate: '.not-expandable'
		});

		cmp.el.addListener('click', function(cmp, el) {
		this.loadClass(el.rel);
		}, this, {
		preventDefault: true,
		delegate: '.docClass'
		});
		}
		}
		})
		},

		cache: {},

		/**
		* Loads class.
		*
		* @param {String} clsUrl name of the class + optionally name of the method, separated with dash.
		* @param {Boolean} noHistory true to disable adding entry to browser history
		*/
		loadClass: function(clsUrl, noHistory) {
		var cls = clsUrl;
		var member;

		Ext.getCmp('container').layout.setActiveItem(1);

		// separate class and member name
		var matches = clsUrl.match(/^(.?)(?:-(.))?$/);
		if (matches) {
		cls = matches[1];
		member = matches[2];
		}

		if (!noHistory) {
		Docs.History.push("/api/" + clsUrl);
		}

		var docTabPanel = Ext.getCmp('docTabPanel');

		if (this.cache[cls]) {
		this.showClass(this.cache[cls], member);
		} else {
		if (docTabPanel) {
		docTabPanel.setLoading(true);
		}

		Ext.data.JsonP.request({
		url: this.getBaseUrl() + '/output/' + cls + '.js',
		callbackName: cls.replace(/\./g, '_'),
		success: function(json, opts) {
		this.cache[cls] = json;
		this.showClass(json, member);
		},
		failure : function(response, opts) {
		console.log('Fail');
		},
		scope: this
		});
		}
		},

		showClass: function(cls, anchor) {

		var container = Ext.getCmp('container'),
		showClass = container.down('showclass'),
		classHeader = showClass.down('classheader'),
		classOverview = showClass.down('classoverview'),
		docTabPanel = Ext.getCmp('docTabPanel');

		classHeader.update(classHeader.tpl.apply(cls));
		classOverview.load(cls);

		if (docTabPanel) {
		docTabPanel.setActiveTab(0);
		docTabPanel.setLoading(false);
		}

		Ext.getCmp('treePanelCmp').selectClass(cls.name);

		if (anchor) {
		Ext.getCmp('doc-overview').scrollToEl("#" + anchor);
		} else {
		var docContent = Ext.get(Ext.query('#doc-overview .x-panel-body')[0]);
		docContent.scrollTo('top', 0);
		}
		},

		showGuide: function(name, noHistory) {
		noHistory \|\| Docs.History.push("/guide/" + name);

		Ext.data.JsonP.request({
		url: this.getBaseUrl() + "/guides/" + name + "/README.js",
		callbackName: name,
		success: function(json) {
		Ext.getCmp("guide").update(json.guide);
		Ext.getCmp('container').layout.setActiveItem(2);
		},
		scope: this
		});
		},

		treeItemClick: function(view, node) {
		var clsName = node.raw ? node.raw.clsName : node.data.clsName;

		if (clsName) {
		this.loadClass(clsName);
		} else if (!node.isLeaf()) {
		if (node.isExpanded()) {
		node.collapse(false);
		} else {
		node.expand(false);
		}
		}
		},

		/**
		* Returns base URL used for making AJAX requests.
		* @return {String} URL
		*/
		getBaseUrl: function() {
		return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
		}


		});
		No newline at end of file

template/app/view/Viewport.js

0 → 100644

+89 −0

Original line number	Diff line number	Diff line
		/**
		* The main screen, split in to a west and center region
		*/
		Ext.define('Docs.view.Viewport', {

		extend: 'Ext.container.Viewport',

		id: 'viewport',
		layout: 'border',
		defaults: { xtype: 'container' },

		initComponent: function() {
		this.items = [

		// This is the 'live docs' header that should appear in the distributed version of the docs
		// {
		// region: 'north',
		// layout: 'fit',
		// cls: 'notice',
		// html: 'For up to date documentation and features, visit <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a>',
		// height: 33
		// },

		{
		region:'west',
		width: 240,
		id: 'west-region-container',
		padding: '5 0 10 20',
		layout: 'vbox',
		defaults: {
		xtype: 'container',
		width: "100%"
		},
		items: [
		{
		xtype: 'button',
		cls: 'logo',
		height: 60,
		margin: '0 0 10 0',
		width: 220,
		border: 0,
		ui: 'hmm',
		listeners: {
		click: function() {
		Ext.getCmp('container').layout.setActiveItem(0);
		}
		}
		},
		{
		cls: 'search',
		height: 40
		},
		{
		flex: 1,
		xtype: 'classtree',
		root: Docs.classData
		}
		]
		},
		{
		region: 'center',
		id: 'center-container',
		layout: 'fit',
		items: {
		id: 'container',
		xtype: 'container',
		layout: 'card',
		padding: '20',
		cls: 'container',
		items: [
		{
		autoScroll: true,
		xtype: 'classlist',
		classData: Docs.overviewData
		},
		Ext.create('Docs.view.class.Show'),
		{
		autoScroll: true,
		xtype: 'container',
		id: 'guide'
		}
		]
		}
		}
		];

		this.callParent(arguments);
		}
		});
		No newline at end of file

template/app/view/class/Header.js

0 → 100644

+36 −0

Original line number	Diff line number	Diff line
		/**
		* Renders class name and icon in page header.
		*/
		Ext.define('Docs.view.class.Header', {
		extend: 'Ext.container.Container',
		padding: '5 0 10 0',
		alias: 'widget.classheader',

		tpl: Ext.create('Ext.XTemplate',
		'<h1 class="{[this.getClass(values)]}">',
		'<a href="source/{href}" target="_blank">{name}</a>',
		'<tpl if="xtype">',
		'<span>xtype: {xtype}</span>',
		'</tpl>',
		'</h1>',
		{
		getClass: function(cls) {
		if (cls.component) {
		return "component";
		}
		else if (cls.singleton) {
		return "singleton";
		}
		else {
		return "class";
		}
		}
		}
		),

		initComponent: function() {
		this.html = this.tpl.apply(this.docClass \|\| ' ');

		this.callParent(arguments);
		}
		});

template/app/view/class/List.js

0 → 100644

+73 −0

Original line number	Diff line number	Diff line
		Ext.define('Docs.view.class.List', {
		extend: 'Ext.container.Container',
		alias : 'widget.classlist',
		id: 'classlist',

		initComponent: function() {

		var data = this.classData;

		var tpl = new Ext.XTemplate(
		'<h1>Ext JS 4.0 API Documentation</h1>',
		'<div class="legend icons">',
		'<h4>Legend</h4>',
		'<ul>',
		'<li class="icn icon-pkg">Package</li>',
		'<li class="icn icon-class">Class</li>',
		'<li class="icn icon-singleton">Singleton</li>',
		'<li class="icn icon-component">Component</li>',
		'<li class="icn icon-book">Guide</li>',
		'</ul>',
		'</div>',
		'<div class="legend guides">',
		'<h4>Guides</h4>',
		'<div class="lft">',
		'<a class="guide getting_started" rel="getting_started" href="guides/getting_started/index.html">Getting Started</a>',
		'<a class="guide class_system" rel="class_system" href="guides/class_system/index.html">Class System</a>',
		'<a class="guide application_architecture" rel="application_architecture" href="guides/application_architecture/index.html">MVC Architecture</a>',
		'<a class="guide layouts_and_containers" rel="layouts_and_containers" href="guides/layouts_and_containers/index.html">Layouts and Containers</a>',
		'</div>',
		'<div class="mid">',
		'<a class="guide data" rel="data" href="guides/data/index.html">Data</a>',
		'<a class="guide grid" rel="grid" href="guides/grid/index.html">Grids</a>',
		'<a class="guide tree" rel="tree" href="guides/tree/index.html">Trees</a>',
		'<a class="guide drawing_and_charting" rel="drawing_and_charting" href="guides/drawing_and_charting/index.html">Charts</a>',
		'</div>',
		'<div class="right">',
		'<a class="guide components" rel="components" href="guides/components/index.html">Components</a>',
		'<a class="guide theming" rel="theming" href="guides/theming/index.html">Theming</a>',
		'<a class="guide direct" rel="direct" href="guides/direct/index.html">Direct</a>',
		'<a class="guide accessibility" rel="accessibility" href="guides/accessibility/index.html">Accessibility</a>',
		'</div>',
		'</div>',
		'</div>',
		'<tpl for="organisation">',
		'<div class="category">',
		'<h1>{name}</h1>',
		'<tpl for="categories">',
		'<div class="{align}">',
		'<tpl for="items">',
		'<h3>{.}</h3>',
		'<div class="links">',
		'{[this.renderClasses(values)]}',
		'</div>',
		'</tpl>',
		'</div>',
		'</tpl>',
		'<div style="clear:both"></div>',
		'</div>',
		'</tpl>',
		{
		renderClasses: function(category) {
		return Ext.Array.map(data.categories[category].classes, function(cls) {
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', cls);
		}).join("\n");
		}
		}
		);

		this.html = tpl.apply(data);

		this.callParent(arguments);
		}
		});
		No newline at end of file