swarnendude

Ext.define('SlideNav.view.Main', {
  extend: 'Ext.TabPanel',
  xtype: 'main',
  config: {
    tabBarPosition: 'bottom',
    items: [{
        title: 'Home',
        iconCls: 'home',
        html: ['This is a very simple example of Facebook style slide navigation. ',
            'The component is mostly developed with CSS3 animations and a small bit of javascript code. ',

swarnendude

Ext.define('SlideNav.view.Navigation', {
  extend: 'Ext.List',
  xtype: 'navigation',
  requires: ['Ext.data.Store'],
  config: {
    cls: 'nav-list',
    itemTpl: '{title}',
    data: [{
        title: 'Item 1'
      }, {

swarnendude

/**
 * Show the gallery carousel with all the images
 */
showGalleryCarousel: function (clickedImage) {
  var me = this,
    clickedImgIndex = 0;

  // Query all the images and save in an array
  me.images = me.images || me.element.query('img.thumbnail');

swarnendude

/*********************** Gallery Carousel *************************/

.gallery-carousel {
    z-index: 20;
    background: rgba(0,0,0,0.7);
}

.gallery-item {
    max-width: 100%;
}

swarnendude

Ext.define('SenchaGallery.view.GalleryCarousel', {
  extend: 'Ext.carousel.Carousel',
  xtype: 'gallerycarousel',
  requires: ['Ext.TitleBar'],
  config: {
    fullscreen: true,
    modal: true,
    images: [],
    html: '<div class="close-gallery" data-action="close_carousel"></div>',
    cls: 'gallery-carousel',

swarnendude

#photos {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    margin: 10px 10px 0 15px;
}

#photos img {
    width: 95% !important;

swarnendude

initialize: function () {
  var me = this;

  // Add tap event on the images to open the carousel
  me.element.on('tap', function (e, el) {
    me.showGalleryCarousel(el);
  }, me, {
    delegate: 'img.thumbnail'
  });

swarnendude

/**
 * Load the images and add them to the gallery container
 * Here is the point where you have to change the fetching mechanism 
 * say to get data with proxy and save in a Store.
 * Also, you may have to change the   
 */
loadImages: function () {
  var me = this;

  Ext.data.JsonP.request({

swarnendude

Ext.define('SenchaGallery.view.Gallery', {
  extend: 'Ext.Container',
  xtype: 'gallery',
  requires: ['Ext.data.JsonP'],
  config: {
    cls: 'gallery',
    scrollable: true,
    // Template to show the thumbnail images
    tpl: Ext.create('Ext.XTemplate',
      '<tpl if="this.isEmpty(items)">',

swarnendude

 panel.element.on('tap', function (e, el) {
   el = Ext.get(el);

   if (!el.getAttribute('data-action')) {
     el = el.parent();
   }
   this.redirectTo(el.getAttribute('data-action'));
 }, this, {
   delegate: 'li.home-menu-item'
 });