Threaded View

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    angelrand is on a distinguished road

      0  

    Default Unanswered: extjs core combo menu carousel lightbox example

    Unanswered: extjs core combo menu carousel lightbox example


    i like this example
    but i donnt want a menu to control photo data load
    as a carousel of a main page it should load data auto
    so i modified the html example sicript code as follow:
    Code:
    Ext.ux.ComboExample = {
                    init: function() {
                        this.photoTemplate = new Ext.Template([
                            '<a href="{href}" class="lightbox" title="{title}">',
                                '<img src="{src}" height="240">',
                            '</a>'
                        ]);
                        //this.menu = new Ext.ux.Menu('combo-menu');
                        //this.menu.on('click', this.loadPhotos, this);
                        
                        this.carousel = new Ext.ux.Carousel('combo-carousel', {
                            interval: 5,
                            itemSelector: 'a.lightbox',
                            showPlayButton: true,
                            pauseOnNavigate: true    
                        });
                        Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
                            callbackKey: 'jsoncallback',
                            params: {
                                format: 'json',
                                tags: 'Plants',
                                lang: 'en-us'                            
                            },
                            callback: this.updatePhotos,
                            scope: this
                        });
                        
                        Ext.ux.Lightbox.register('a.lightbox', true);
                        
                        Ext.ux.Lightbox.on('open', function() {
                            this.carousel.pause();
                        }, this);
                        
                        Ext.ux.Lightbox.on('close', function(image) {
                            this.carousel.setSlide(image);
                            this.carousel.play();
                        }, this);                        
                    },     
                    
                    
                    updatePhotos: function(data) {
                        Ext.select('#combo-carousel > p').remove();
                        
                        this.carousel.clear();
                        Ext.each(data.items, function(item) {
                            item.src = item.media.m;
                            item.href = item.media.m.replace('_m.jpg', '.jpg');
                            this.carousel.add(this.photoTemplate.append('combo-carousel', item));
                        }, this);
                        
                        this.carousel.refresh().play();
                    }
                };
                
                Ext.onReady(Ext.ux.ComboExample.init, Ext.ux.ComboExample);
    and it works
    but i donnot know how to insert these into my own code
    'cause the Ext.onReady cannot excuse as follow:
    Code:
    Ext.onReady(function(){alert("i can add my own function!")},Ext.ux.ComboExample.init, Ext.ux.ComboExample );
    or
    Code:
    Ext.onReady(Ext.ux.ComboExample.init, Ext.ux.ComboExample ,function(){alert("i can add my own function!")});
    so i try to modify the original code into like this:
    Code:
    Ext.onReady(function(){
              var photoTemplate = new Ext.Template([
                            '<a href="{href}" class="lightbox" title="{title}">',
                                '<img src="{src}" height="240">',
                            '</a>'
                        ]);
              var carousel = new Ext.ux.Carousel('combo-carousel', {
                            interval: 5,
                            itemSelector: 'a.lightbox',
                            showPlayButton: true,
                            pauseOnNavigate: true    
                        });
                        Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
                            callbackKey: 'jsoncallback',
                            params: {
                                format: 'json',
                                tags: 'Plants',
                                lang: 'en-us'                            
                            },
                            callback: updatePhotos,
                            scope: this
                        });
                        
                        Ext.ux.Lightbox.register('a.lightbox', true);
                        
                        Ext.ux.Lightbox.on('open', function() {
                            this.carousel.pause();
                        }, this);
                        
                        Ext.ux.Lightbox.on('close', function(image) {
                            this.carousel.setSlide(image);
                            this.carousel.play();
                        }, this);     
              updatePhotos: function(data) {
                        Ext.select('#combo-carousel > p').remove();
                        
                        this.carousel.clear();
                        Ext.each(data.items, function(item) {
                            item.src = item.media.m;
                            item.href = item.media.m.replace('_m.jpg', '.jpg');
                            this.carousel.add(this.photoTemplate.append('combo-carousel', item));
                        }, this);
                        
                        this.carousel.refresh().play();
                    };
                  })
    but it doesnot work
    so help me please
    Last edited by Condor; 25 Jul 2010 at 5:26 AM. Reason: Please post using [CODE] tags!

Similar Threads

  1. mixed extjs, and ext.core(menu example) submenu overlay
    By smokeman in forum Community Discussion
    Replies: 1
    Last Post: 1 Mar 2010, 10:01 AM
  2. Replies: 2
    Last Post: 3 Feb 2010, 1:44 AM
  3. Replies: 7
    Last Post: 22 Jun 2009, 10:20 PM
  4. [EXTJS-CORE 3.0]: Carousel
    By stefan.riedel-seifert in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 5 May 2009, 4:49 AM

Thread Participants: 1

Tags for this Thread