Permalink
Browse files

More cleaning up, especially in demo app

  • Loading branch information...
1 parent 8821bc9 commit fc37875fa45e581a85b0daccc069f9b964d5727c @ryanphung committed Apr 26, 2012
Showing with 49 additions and 98 deletions.
  1. +2 −0 app.js
  2. +3 −2 app/controller/Main.js
  3. +12 −0 app/model/Image.js
  4. +17 −0 app/store/Images.js
  5. +0 −10 app/view/Preview.js
  6. +10 −29 app/view/Viewport.js
  7. +5 −57 ux/Coverflow.js
View
2 app.js
@@ -9,6 +9,8 @@ Ext.Loader.setPath('Ext.ux.Coverflow', 'ux/Coverflow.js');
Ext.application({
name: 'Demo',
autoCreateViewport: true,
+ models: ['Image'],
+ stores: ['Images'],
controllers: ['Main'],
launch: function() {
// launch codes go here...
View
@@ -6,6 +6,7 @@ Author: Ryan Phung
Ext.define('Demo.controller.Main', {
extend: 'Ext.app.Controller',
+ stores: ['Images'],
refs: [{
selector: 'preview',
ref: 'preview'
@@ -35,7 +36,7 @@ Ext.define('Demo.controller.Main', {
})
},
onAddImage: function () {
- var store = Ext.data.StoreManager.lookup('imagesStore');
+ var store = this.getImagesStore();
var src = this.images[store.getCount() % 11];
@@ -44,7 +45,7 @@ Ext.define('Demo.controller.Main', {
});
},
onRemoveImage: function () {
- var store = Ext.data.StoreManager.lookup('imagesStore');
+ var store = this.getImagesStore();
store.removeAt(store.getCount() - 1);
}
});
View
@@ -0,0 +1,12 @@
+/*
+Image model
+
+Author: Ryan Phung
+*/
+
+Ext.define('Demo.model.Image', {
+ extend: 'Ext.data.Model',
+ fields: [
+ { name:'src', type:'string' }
+ ]
+});
View
@@ -0,0 +1,17 @@
+/*
+Image store
+
+Author: Ryan Phung
+*/
+
+Ext.define('Demo.store.Images', {
+ extend: 'Ext.data.Store',
+ requires: 'Demo.model.Image',
+ model: 'Demo.model.Image',
+ data: [
+ { src:'resources/img/gorillaz-plasticbeach.jpg' },
+ { src:'resources/img/kingsofleon-comearoundsunshine.jpg' },
+ { src:'resources/img/kidrock-bornfree.jpg' },
+ { src:'resources/img/recovery-recovery.jpg' }
+ ]
+});
View
@@ -1,10 +0,0 @@
-/*
-Preview view, extending Ext.ux.Coverflow
-
-Author: Ryan Phung
-*/
-
-Ext.define('Demo.view.Preview', {
- extend: 'Ext.ux.Coverflow',
- alias: 'widget.preview'
-});
View
@@ -6,44 +6,25 @@ Author: Ryan Phung
Ext.define('Demo.view.Viewport', {
extend: 'Ext.container.Viewport',
- requires: ['Demo.view.Preview', 'Demo.view.Selection'],
+ requires: ['Ext.ux.Coverflow', 'Demo.view.Selection'],
layout: 'fit',
initComponent: function () {
- Ext.define('Image', {
- extend: 'Ext.data.Model',
- fields: [
- { name:'src', type:'string' }
- ]
- });
-
- Ext.create('Ext.data.Store', {
- id:'imagesStore',
- model: 'Image',
- data: [
- { src:'resources/img/gorillaz-plasticbeach.jpg' },
- { src:'resources/img/kingsofleon-comearoundsunshine.jpg' },
- { src:'resources/img/kidrock-bornfree.jpg' },
- { src:'resources/img/recovery-recovery.jpg' }
- ]
- });
-
- var preview = Ext.create('Demo.view.Preview', {
- store: Ext.data.StoreManager.lookup('imagesStore'),
- margin: '5 5 5 5',
- border: false,
- itemWidth: 200,
- itemHeight: 200
- });
-
this.items = {
xtype: 'panel',
dockedItems: [{
dock: 'top',
xtype: 'panel',
- height: 350,
+ height: 400,
layout: 'fit',
border: false,
- items: [preview]
+ items: [{
+ xtype: 'coverflow',
+ store: 'Images',
+ margin: '5 5 5 5',
+ border: false,
+ itemWidth: 200,
+ itemHeight: 200
+ }]
}],
items: [{
xtype: 'slideselection',
View
@@ -122,6 +122,9 @@ Ext.define('Ext.ux.Coverflow', {
return pref;
}
+ // applying the initial config to overwrite default values
+ Ext.apply(this, this.initialConfig);
+
/* Begin additional properties */
this.vendorPrefix = getPrefix('transform');
this.props = this.orientation == 'vertical' ? ['height', 'Height', 'top', 'Top', 't', 'left'] : ['width', 'Width', 'left', 'Left', 'l', 'top'];
@@ -304,63 +307,7 @@ Ext.define('Ext.ux.Coverflow', {
css[this.props[2]] = this._calculateBodyOffset() + 'px';
this.innerElement.applyStyles(css);
},
-
- /*getImages: function () {
- return this.getComponent('body').items ? this.getComponent('body').items : [];
- },
-
- addImage: function (src) {
- var imageId = this.getImages().length;
- this.getComponent('body').add({
- imageId: imageId,
- xtype: 'coverflow-image',
- src: src,
- position: 'relative',
- float: 'left',
- // margin: -this.itemWidth / 7,
- width: this.itemWidth,
- height: this.itemWidth
- });
-
- this.mon(this.getImages().getAt(imageId).getEl(), 'click', function (e, t, options) {
- this.select(options.imageId);
- }, this, {
- imageId: imageId
- });
- this._refresh(1, 0, this.current);
-
- },
-
- removeImage: function (index) {
- var me = this;
- // remove all listeners in all items after the removed item
- this.getImages().each(function (item) {
- if (item.imageId >= index) {
- me.mun(item.getEl(), 'click');
- }
- });
-
- this.getComponent('body').remove(index);
-
- this.getImages().each(function (item) {
- // adjusting the imageId of all items after the removed item
- if (item.imageId > index) {
- item.imageId--;
- me.mon(item.getEl(), 'click', function (e, t, options) {
- this.select(options.imageId);
- }, me, {
- imageId: item.imageId
- });
- }
- });
-
- if (this.current > index && this.current > 0) {
- this.select(this.current - 1);
- }
-
- this._refresh(1, 0, this.current);
- },*/
-
+
_calculateBodyOffset: function () {
var innerElement = this.innerElement;
@@ -461,6 +408,7 @@ Ext.define('Ext.ux.Coverflow', {
}
return css;
},
+
_refresh: function (state, from, to) {
var me = this,
offset = null;

0 comments on commit fc37875

Please sign in to comment.