Pushing new full-size image view from a gallery of thumbnail images in Sencha Touch 2

Question

I am currently using Sencha Touch 2 to create an image gallery. I have already been successful in loading the images from a JSON store in the main gallery, which features thumbnails of the images. I want to be able to have the user click/tap on each of the images in the main gallery and have the TAP EVENT push the image into a new view, which will display the image in its full-size.

Currently, this is my view:

Ext.define("tumblrPhotos.view.SampleView", {
extend: 'Ext.dataview.DataView',
xtype:'sampleviewtest',
requires: [
    'tumblrPhotos.store.PhotoStore',
],

config: {
    title: 'Photos',
    layout: 'card',
    id: 'gallerythumbnail',
    store: 'PhotoStore',
    styleHTMLContent: true,
    fullscreen: true,
    scrollable: 'vertical',
    baseCls: 'gallery-image',
    itemTpl: new Ext.XTemplate ([
        '<div class="gallery-thumbnail">',
        '<tpl for="photos[0].alt_sizes[0]">',
            '<img src="{url}" class="test" />',
        '</tpl>',
        '</div>'
    ].join('')
    ),
},  

});

And this is my controller so far. This part is not working:

Ext.define('tumblrPhotos.controller.GalleryController',{
extend: 'Ext.app.Controller',

config: {
    refs: {
         nav: 'galleryview', //the xtype

    }, 
    control: {
        '#gallerythumbnail': { //the xtype
            itemtap: 'viewFullScreen',
        }
    }
},

viewFullScreen : function(dv,index,target,record,e,eOpts){
    Ext.ComponentManager.get('galleryview').push('tumblrPhotos.view.FullView');
    console.log(record);
}

});

Thank you so much to all who can help me! I really appreciate it!

Can you define "not working"? Does anything happen at all? Do you see any errors? — arthurakay, Jan 16 '13 at 18:04
Sure! This is what I get in the Javascript console: Uncaught TypeError: Cannot call method 'push' of undefined The error is in the "viewFullScreen" function in the controller. — lisasy, Jan 16 '13 at 18:25
Please show `galleryview` class. I would suggest you to put breakpoint on this line and see what `Ext.getCmp('galleryviewid')` and `Ext.getCmp('galleryview')` and `Ext.get('galleryview')` returns — ThinkFloyd, Jan 17 '13 at 11:06

score 0 · Accepted Answer · answered Jan 16 '13 at 19:01

Per your comment, the error is relatively obvious...

Ext.ComponentManager.get('galleryview')

...doesn't return anything.

Looking in the API docs for Sencha Touch, I see that Ext.ComponentManager is a private class - so you really shouldn't be using it. Perhaps you should be using Ext.ComponentQuery or something else to grab ahold of that component.

And considering you have a "ref" defined for that xtype on the controller, you could use the auto-created getter for it (getNav() in your case, I think).

Last but not least, you didn't post any code for that particular component (galleryview), so I can't really speculate beyond what I've just said.

Pushing new full-size image view from a gallery of thumbnail images in Sencha Touch 2

1 Answers1