Ext.define(‘Cao.view.EventMosaic‘, {    extend: ‘Ext.Container‘,    xtype: ‘EventMosaic‘,    requires: [ ],    config: {        cls : ‘gallery‘,        store:‘apiEventsStore‘,        scrollable : true,        tpl : Ext.create(‘Ext.XTemplate‘,             ‘<tpl if="this.isEmpty(Events)">‘,            ‘<div class="empty-text empty-gallery">No image available</div>‘,            ‘</tpl>‘,            ‘<div class="gallery" id="photos">‘,            ‘<tpl for="Events">‘,            ‘<div class="imgbox">‘,            ‘<img src="http://www.mamicode.com/{Pic}" class="thumbnail" data-id="{Id}" data-title="{Title:this.decode}" data-fullimage="{Pic:this.getFullImage}" />‘,            ‘<p>{Title:this.decode}</p>‘,            ‘</div>‘,            ‘</tpl>‘,            ‘</div>‘, {                        isEmpty : function(items){                            if(items.length === 0){                                return true;                            }                            return false;                        },                                                getThumbnail : function(url){                            //return url.replace(‘_m‘, ‘_t‘);                            return url;                        },                                                getFullImage : function(url){                            //return url.replace(‘_m‘, ‘_n‘);                            return url;                        },                        decode: function(name){                            return Ext.Object.getKeys(Ext.Object.fromQueryString(name))[0];                        }            })    },                    initialize : function(){        var me = this;                // Add tap event on the images to open the carousel        me.element.on(‘tap‘, function(e, el){                //me.showEventCarousel(el);                    me.showEventDetail(el);            }, me, {                delegate : ‘img.thumbnail‘        });                me.loadImages();        me.callParent(arguments);    },            /**        * 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 homeStore = Ext.getStore(‘apiEventsStore‘),        me = this;                homeStore.load({            callback: function(records, operation, success) {                var record = records[0]; //Get the first record                var data = http://www.mamicode.com/record.getData(); //Get the data from the record                 me.events = data.Events;                me.setData(data);            },            scope: this        });    },                showEventDetail : function(clickedImage) {        var eveId = clickedImage.getAttribute(‘data-id‘),        eveTitle = clickedImage.getAttribute(‘data-title‘),        console.log(eveId+‘   ‘+eveTitle);    }});

/*     Document   : gallery    Created on : Apr 18, 2013, 8:08:10 PM    Author     : SWARNENDU    Description:        Purpose of the stylesheet follows.*/root {	display: block;}/*body, .gallery.x-container {	background: url(http://freeiphonehdwallpaper.com/wp-content/uploads/blue-texture-iphone-hd-wallpaper-320x480.jpg);	background-size: 100% 100%;}*//************************* Gallery *******************************/	/* Prevent vertical gaps */#photos {	line-height: 0;	-webkit-column-count: 2;	-webkit-column-gap: 0px;	margin:10px 1px 0 7px;}#photos .imgbox {	width: 97% !important;	height: auto !important;	margin: 0px 0px 10px 0px;	padding:3px;	background: #fff;	-webkit-box-shadow: 0 2px 4px #999;	box-shadow: 0 2px 4px #999;}#photos img {	width: 100% !important;	height: auto !important;}#photos .imgbox p {	margin: 0;	line-height: 18px;	padding: 5px;	font-size: 14px;}/************************* Gallery ENDS *******************************//*********************** Gallery Carousel *************************/.gallery {	background: #D7D6DA;}.gallery-carousel {	z-index: 20;	background: rgba(0,0,0,0.7);}.gallery-item {	max-width: 100%;/*				margin-left: 1%;*/}.gallery-carousel .x-carousel-item .x-innerhtml {	height: 100% !important;	display: -webkit-box;	-webkit-box-align: center;	-webkit-box-pack: center;}.gallery-carousel .x-carousel-indicator-dark span {	background-color: rgba(255,255,255,0.3) !important;}.gallery-carousel .x-carousel-indicator-dark span.x-carousel-indicator-active {	background-color: rgba(255,255,255,1) !important;}.gallery-carousel .close-gallery {	position: absolute;	-webkit-mask-image: url(../images/close.png);	-webkit-mask-repeat: no-repeat;	background: #fff;	-webkit-mask-size: 32px;	height: 32px;	width: 32px;	margin: 10px;	right: 0;}.gallery-carousel .x-carousel-item .x-innerhtml {	text-align : center;}.gallery-carousel .item {	max-width : 100%;	max-height : 100%;}.gallery-carousel .nav {	-webkit-mask: url(../images/arrow.png) no-repeat;	background: #fff;	min-width: 16px;	min-height: 16px;	-webkit-mask-position: 12px 6px;}.gallery-carousel .gallery-left {	-webkit-transform: rotate(180deg);}.gallery-carousel .gallery-right {}.gallery-carousel .gallery-bottombar .x-title {	font-size: 14px !important;	color : #fff;}/*********************** Gallery Carousel ENDS *************************/