Permalink
Browse files

Merge branch '07_create_icon_buttons'

  • Loading branch information...
2 parents 26c6432 + 63f2e44 commit 716a4631b377efde7647f44186ca01cd80bd6cda @nelstrom committed Apr 5, 2011
View
@@ -2,11 +2,7 @@ ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",
launch: function() {
- this.views.homecard = new this.views.Homecard();
- this.views.searchcard = new this.views.Searchcard();
- this.views.actioncard = new this.views.Actioncard();
- this.views.settingscard = new this.views.Settingscard();
- this.views.morecard = new this.views.Morecard();
this.views.viewport = new this.views.Viewport();
+ this.views.homecard = this.views.viewport.getComponent('home');
}
});
@@ -1,16 +1,14 @@
-// Note: This file must be loaded after the files:
-// bookmarkcard.js and aboutcard.js
ToolbarDemo.morestore = new Ext.data.TreeStore({
model: 'ListItem',
root: {
items: [{
text: 'About',
- card: ToolbarDemo.views.Aboutcard,
+ card: {xtype: 'aboutcard'},
leaf: true
},
{
text: 'Bookmarks',
- card: ToolbarDemo.views.Bookmarkcard,
+ card: {xtype: 'bookmarkcard'},
leaf: true
}],
},
@@ -6,16 +6,11 @@ ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
pack: 'center'
}
},
- initComponent: function() {
- Ext.apply(this, {
- items: [
- ToolbarDemo.views.homecard,
- ToolbarDemo.views.searchcard,
- ToolbarDemo.views.actioncard,
- ToolbarDemo.views.settingscard,
- ToolbarDemo.views.morecard
- ]
- });
- ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
- }
+ items: [
+ { xtype: 'homecard', id: 'home' },
+ { xtype: 'searchcard' },
+ { xtype: 'actioncard' },
+ { xtype: 'settingscard' },
+ { xtype: 'morecard' }
+ ]
});
@@ -3,3 +3,5 @@ ToolbarDemo.views.Aboutcard = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
html: 'Made from coffee'
});
+
+Ext.reg('aboutcard', ToolbarDemo.views.Aboutcard);
@@ -1,79 +1,88 @@
-ToolbarDemo.views.topbar = new Ext.Toolbar({
- title: "Buttons",
- items: [
- {
- iconCls: 'delete', iconMask: true, ui: "plain",
- handler: function() {
- ToolbarDemo.views.homecard.tab.setBadge("");
+(function() {
+ var topbar = {
+ xtype: "toolbar",
+ title: "Buttons",
+ items: [
+ {
+ iconCls: 'delete', iconMask: true, ui: "plain",
+ handler: function() {
+ ToolbarDemo.views.homecard.tab.setBadge("");
+ }
+ },
+ { xtype: 'spacer' },
+ {
+ iconCls: 'star', iconMask: true, ui: "plain",
+ handler: function() {
+ var hometab = ToolbarDemo.views.homecard.tab,
+ badgenumber = parseInt(hometab.badgeText),
+ nextnumber = isNaN(badgenumber) ? 1 : badgenumber+1;
+ hometab.setBadge(nextnumber);
+ }
}
- },
- { xtype: 'spacer' },
- {
- iconCls: 'star', iconMask: true, ui: "plain",
- handler: function() {
- var hometab = ToolbarDemo.views.homecard.tab,
- badgenumber = parseInt(hometab.badgeText),
- nextnumber = isNaN(badgenumber) ? 1 : badgenumber+1;
- hometab.setBadge(nextnumber);
- }
- }
- ]
-});
+ ]
+ };
+
+ var textButtonShapes = {
+ xtype: "toolbar",
+ dock: 'bottom',
+ items: [
+ { text: 'back', ui: 'back' },
+ { text: 'normal', ui: 'normal' },
+ { text: 'small', ui: 'small' },
+ { text: 'round', ui: 'round' },
+ { text: 'forward', ui: 'forward' },
+ ]
+ };
-ToolbarDemo.views.textButtonShapes = new Ext.Toolbar({
- dock: 'bottom',
- items: [
- { text: 'back', ui: 'back' },
- { text: 'normal', ui: 'normal' },
- { text: 'small', ui: 'small' },
- { text: 'round', ui: 'round' },
- { text: 'forward', ui: 'forward' },
- ]
-});
+ var textButtonColors = {
+ xtype: 'toolbar',
+ dock: 'bottom',
+ items: [
+ { text: 'normal' },
+ { text: 'action', ui: 'action' },
+ { text: 'confirm', ui: 'confirm' },
+ { text: 'decline', ui: 'decline' },
+ ]
+ };
-ToolbarDemo.views.textButtonColors = new Ext.Toolbar({
- dock: 'bottom',
- items: [
- { text: 'normal' },
- { text: 'action', ui: 'action' },
- { text: 'confirm', ui: 'confirm' },
- { text: 'decline', ui: 'decline' },
- ]
-});
+ var mixedTextButtons = {
+ xtype: 'toolbar',
+ dock: 'bottom',
+ items: [
+ { text: 'action', ui: 'action-round' },
+ { text: 'action', ui: 'action-small' },
+ { text: 'confirm', ui: 'confirm-round' },
+ { text: 'confirm', ui: 'confirm-small' },
+ { text: 'decline', ui: 'decline-round' },
+ { text: 'decline', ui: 'decline-small' },
+ ]
+ };
-ToolbarDemo.views.mixedTextButtons = new Ext.Toolbar({
- dock: 'bottom',
- items: [
- { text: 'action', ui: 'action-round' },
- { text: 'action', ui: 'action-small' },
- { text: 'confirm', ui: 'confirm-round' },
- { text: 'confirm', ui: 'confirm-small' },
- { text: 'decline', ui: 'decline-round' },
- { text: 'decline', ui: 'decline-small' },
- ]
-});
+ var imageButtons = {
+ xtype: 'toolbar',
+ dock: 'bottom',
+ items: [
+ { iconCls: 'star', iconMask: true, text: 'favorite' },
+ { iconCls: 'star', iconMask: true, ui: 'action' },
+ { iconCls: 'star', iconMask: true, ui: 'confirm' },
+ { iconCls: 'star', iconMask: true, ui: 'decline' },
+ { iconCls: 'star', iconMask: true, ui: 'plain' },
+ ]
+ };
-ToolbarDemo.views.imageButtons = new Ext.Toolbar({
- dock: 'bottom',
- items: [
- { iconCls: 'star', iconMask: true },
- { iconCls: 'star', iconMask: true, ui: 'action' },
- { iconCls: 'star', iconMask: true, ui: 'confirm' },
- { iconCls: 'star', iconMask: true, ui: 'decline' },
- { iconCls: 'star', iconMask: true, ui: 'plain' },
- ]
-});
+ ToolbarDemo.views.Actioncard = Ext.extend(Ext.Panel, {
+ title: "action",
+ iconCls: "action",
+ styleHtmlContent: true,
+ html: "placeholder text",
+ dockedItems: [
+ topbar,
+ //textButtonShapes,
+ //textButtonColors,
+ //mixedTextButtons,
+ //imageButtons
+ ]
+ });
-ToolbarDemo.views.Actioncard = Ext.extend(Ext.Panel, {
- title: "action",
- iconCls: "action",
- styleHtmlContent: true,
- html: "placeholder text",
- dockedItems: [
- ToolbarDemo.views.topbar,
- // ToolbarDemo.views.textButtonShapes,
- // ToolbarDemo.views.textButtonColors,
- // ToolbarDemo.views.mixedTextButtons,
- // ToolbarDemo.views.imageButtons
- ]
-});
+ Ext.reg('actioncard', ToolbarDemo.views.Actioncard);
+})();
@@ -3,3 +3,5 @@ ToolbarDemo.views.Bookmarkcard = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
html: 'Your bookmarks here'
});
+
+Ext.reg('bookmarkcard', ToolbarDemo.views.Bookmarkcard);
@@ -1,7 +1,9 @@
ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "home",
iconCls: "home",
- styleHtmlContent: true,
+ defaults: {
+ styleHtmlContent: true
+ },
items: [{
title: 'TabPanels',
scroll: 'vertical',
@@ -12,3 +14,5 @@ ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
html: '<p>Toolbars can be used as a title bar or as a container for buttons, or you can mix and match both of these functions.</p>'
}]
});
+
+Ext.reg('homecard', ToolbarDemo.views.Homecard);
@@ -5,6 +5,8 @@ ToolbarDemo.views.Morecard = Ext.extend(Ext.NestedList, {
cardSwitchAnimation: 'slide',
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
- return new itemData.card;
+ return itemData.card;
}
});
+
+Ext.reg('morecard', ToolbarDemo.views.Morecard);
@@ -8,3 +8,5 @@ ToolbarDemo.views.Searchcard = Ext.extend(Ext.Panel, {
title: "Search"
}]
});
+
+Ext.reg('searchcard', ToolbarDemo.views.Searchcard);
@@ -26,3 +26,5 @@ ToolbarDemo.views.Settingscard = Ext.extend(Ext.form.FormPanel, {
}
]
});
+
+Ext.reg('settingscard', ToolbarDemo.views.Settingscard);
View
@@ -9,13 +9,13 @@
<!-- app, models, stores, views, controllers [in that order!] -->
<script src="app/app.js" type="text/javascript"></script>
<script src="app/models/list_item.js" type="text/javascript"></script>
+ <script src="app/stores/morestore.js" type="text/javascript"></script>
<script src="app/views/homecard.js" type="text/javascript"></script>
<script src="app/views/searchcard.js" type="text/javascript"></script>
<script src="app/views/actioncard.js" type="text/javascript"></script>
<script src="app/views/settingscard.js" type="text/javascript"></script>
<script src="app/views/aboutcard.js" type="text/javascript"></script>
<script src="app/views/bookmarkcard.js" type="text/javascript"></script>
- <script src="app/stores/morestore.js" type="text/javascript"></script>
<script src="app/views/morecard.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>

0 comments on commit 716a463

Please sign in to comment.