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