swarnendude

define(['sandbox', 'text!widgets/newevent/templates/base.html',
  'kendo', 'dom', 'backbone', '../models/event', '../views/organisation'],

function (sandbox, baseTemplate, kendo, $, backbone, Event,
OrganisationView) {
  'use strict';

  var NewEventView = sandbox.mvc.View({
    tagName: 'div',
    attributes: {

swarnendude

define(['sandbox', 'text!widgets/newevent/templates/base.html',
  'kendo', 'dom', 'backbone', '../models/event', '../views/organisation'],

function (sandbox, baseTemplate, kendo, $, backbone, Event, OrganisationView) {
  'use strict';

  var NewEventView = sandbox.mvc.View({
    tagName: 'div',
    attributes: {
      "data-role": "view",

swarnendude

<header data-role="header">
  <div data-role="navbar">
    <a id="cancel_new_event" class="nav-button" data-align="left" data-role="button">Cancel</a>New Event
    <a id="save_new_event" class="nav-button" data-align="right" data-role="button">Save</a>
  </div>
</header>
<ul data-role="listview" data-style="inset" id="new_event_list">
  <li class="organisation">Organisation</li>
</ul>

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'
 });

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

/**
 * 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

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

#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

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

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

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

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