Set up image/info panels + toolbar in a card layout.

nelstrom · May 22, 2011 · 047416b · 047416b
1 parent 333f0e1
commit 047416b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/public/app/views/InfoBar.js b/public/app/views/InfoBar.js
@@ -0,0 +1,37 @@
+App.views.InfoBar = Ext.extend(Ext.Panel, {
+    initComponent: function(){
+        var infoBarPanel = this;
+
+        Ext.apply(this, {
+
+            layout: 'card',
+
+			dockedItems: [
+				{
+					xtype: 'toolbar',
+					title: this.title
+				}
+			],
+            items: [
+                {
+                    cls: 'canvas ' + this.slug,
+                },
+                {
+					tpl: [
+						"<h2>{title}</h2>",
+						"<p>by {artist}</p>",
+						"<dl>",
+						"  <dt>medium:</dt><dd>{medium}</dd>",
+						"  <dt>dimensions:</dt><dd>{dimensions}</dd>",
+						"</dl>"
+					],
+					show: function() { this.update(infoBarPanel); }
+                }
+            ]
+        });
+
+        App.views.HtmlPage.superclass.initComponent.call(this);
+    }
+});
+
+Ext.reg('infobar', App.views.InfoBar);
diff --git a/public/app/views/viewport.js b/public/app/views/viewport.js
@@ -7,7 +7,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
             defaults: { styleHtmlContent: true },
             items: [
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'asteroid',
                     title: 'Untitled asteroid',
                     artist: 'Dale Adcock',
@@ -16,7 +16,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'template',
                     title: 'Template',
                     artist: 'Dale Adcock',
@@ -25,7 +25,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'standing',
                     title: 'Standing',
                     artist: 'Dale Adcock',
@@ -34,7 +34,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'sitting',
                     title: 'Sitting',
                     artist: 'Dale Adcock',
@@ -43,7 +43,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'erect',
                     title: 'Erect',
                     artist: 'Dale Adcock',

diff --git a/public/index.html b/public/index.html
@@ -11,6 +11,7 @@
   <script src="app/views/HtmlPage.js" type="text/javascript"></script>
   <script src="app/views/InfoPanel.js" type="text/javascript"></script>
   <script src="app/views/InfoSwipe.js" type="text/javascript"></script>
+  <script src="app/views/InfoBar.js" type="text/javascript"></script>
   <script src="app/views/viewport.js" type="text/javascript"></script>
 
 </head>