mosaic布局

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="{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 = 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);
    }

});