2 * List of classes on front page.
3 * Together with links to guides and icons legend.
5 Ext.define('Docs.view.index.Container', {
6 extend: 'Ext.container.Container',
7 alias : 'widget.indexcontainer',
10 initComponent: function() {
11 var data = this.classData;
13 var tpl = new Ext.XTemplate(
14 '<h1 class="pb">{title}</h1>',
15 '<div class="legend icons">',
18 '<li class="icn icon-pkg">Package</li>',
19 '<li class="icn icon-class">Class</li>',
20 '<li class="icn icon-singleton">Singleton</li>',
21 '<li class="icn icon-component">Component</li>',
22 '<li class="icn icon-book">Guide</li>',
25 '<div class="legend guides">',
28 '<a class="guide getting_started" rel="getting_started" href="guides/getting_started/index.html">Getting Started</a>',
29 '<a class="guide class_system" rel="class_system" href="guides/class_system/index.html">Class System</a>',
30 '<a class="guide application_architecture" rel="application_architecture" href="guides/application_architecture/index.html">MVC Architecture</a>',
31 '<a class="guide layouts_and_containers" rel="layouts_and_containers" href="guides/layouts_and_containers/index.html">Layouts and Containers</a>',
34 '<a class="guide data" rel="data" href="guides/data/index.html">Data</a>',
35 '<a class="guide grid" rel="grid" href="guides/grid/index.html">Grids</a>',
36 '<a class="guide tree" rel="tree" href="guides/tree/index.html">Trees</a>',
37 '<a class="guide drawing_and_charting" rel="drawing_and_charting" href="guides/drawing_and_charting/index.html">Charts</a>',
39 '<div class="right">',
40 '<a class="guide components" rel="components" href="guides/components/index.html">Components</a>',
41 '<a class="guide theming" rel="theming" href="guides/theming/index.html">Theming</a>',
42 '<a class="guide direct" rel="direct" href="guides/direct/index.html">Direct</a>',
43 '<a class="guide accessibility" rel="accessibility" href="guides/accessibility/index.html">Accessibility</a>',
45 '<div class="egLink"><a href="http://dev.sencha.com/deploy/ext-4.0.1/examples/index.html">View the Ext 4.0.1 examples →</a></div>',
48 '<tpl for="organisation">',
49 '<div class="category">',
51 '<tpl for="categories">',
52 '<div class="{align}">',
55 '<div class="links">',
56 '{[this.renderClasses(values)]}',
61 '<div style="clear:both"></div>',
65 renderClasses: function(category) {
66 return Ext.Array.map(data.categories[category].classes, function(cls) {
67 return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', cls);
73 this.html = tpl.apply(Ext.apply({
74 // Use the same title as in <title>
75 title: document.getElementsByTagName("title")[0].innerHTML
78 this.callParent(arguments);