extjs core combo menu carousel lightbox example

[angelrand]

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:

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:

Ext.onReady(function(){alert("i can add my own function!")},Ext.ux.ComboExample.init, Ext.ux.ComboExample );

or

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:

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

[Condor]

Use:

Ext.onReady(function(){
  alert("i can add my own function!");
  Ext.ux.ComboExample.init();
});

[angelrand]

thanks for help
i have less exprience of javascript and should learn more

[angelrand]

code as follow fetch comment from api.flickr.com with jsonp
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
});
how can i fetch something from local, use json?
maybe how to implement 'http://api.flickr.com/services/feeds/photos_public.gne' local with c#.ashx?
if i just coding in aspx.cs and
write things like <a herf="slides/1.jpg" <img src="slides/1.jpg"> title="Masterpiece" </a>
between <div id=carousel> and </div> in my aspx file????

[Condor]

Look at the photoTemplate. That's what you should insert in the <div id="carousel">.

[angelrand]

yes thanks
i got it

but i dont want insert comment in my aspx page
'cause i think this will make aspx page load slow? is that true?
i want an ajax method to load data,when loaded then add item to carousel
just like jsonp
i think Ext.Direct will be a good selution
Ext is so wanderful
thanks again

[angelrand]

still question with code like this:
Ext.ux.JSONP.request('../webcontrols/tree/ProRecGet.ashx', {
//callbackKey: 'jsoncallback',
params: {
format: 'json',
//tags: 'Plants',
lang: 'en-us'
},
callback: this.updatePhotos,
scope: this
});
my url"../webcontrols/tree/ProRecGet.ashx" takes no params and just response data like this:
{"items":[{"href":"../../prophoto/recommend/1.jpg","src":"../../prophoto/recommend/1.jpg","title":"1.jpg"},
{"href":"../../prophoto/recommend/10.jpg","src":"../../prophoto/recommend/10.jpg","title":"10.jpg"},
{"href":"../../prophoto/recommend/2.jpg","src":"../../prophoto/recommend/2.jpg","title":"2.jpg"},
{"href":"../../prophoto/recommend/3.jpg","src":"../../prophoto/recommend/3.jpg","title":"3.jpg"},
{"href":"../../prophoto/recommend/4.jpg","src":"../../prophoto/recommend/4.jpg","title":"4.jpg"},
{"href":"../../prophoto/recommend/5.jpg","src":"../../prophoto/recommend/5.jpg","title":"5.jpg"},
{"href":"../../prophoto/recommend/6.jpg","src":"../../prophoto/recommend/6.jpg","title":"6.jpg"},
{"href":"../../prophoto/recommend/7.jpg","src":"../../prophoto/recommend/7.jpg","title":"7.jpg"},
{"href":"../../prophoto/recommend/8.jpg","src":"../../prophoto/recommend/8.jpg","title":"8.jpg"},
{"href":"../../prophoto/recommend/9.jpg","src":"../../prophoto/recommend/9.jpg","title":"9.jpg"}]}
but the updatePhotos cannot work
i have use Ext.Ajax.request replace Jsonp like:
Ext.Ajax.request({
url: '../webcontrols/tree/ProRecGet.ashx',
success: this.updaPhotos
});
and before the responseText add "success:true"
it still cannot work
and i debug the code in firebug
and the function updatePhotos doesnot call?
Here is the code of prorecget.aspx.cs
public void ProcessRequest(HttpContext context)
{
//get products photo path

string path = context.Server.MapPath(".") + "/" + "../../prophoto/recommend/";
context.Response.ContentType = "text/html";

string lpdir = "../../prophoto/recommend/";

//"title": "Recent Uploads tagged boats",
//"link": "http://www.flickr.com/photos/tags/boats/",
//"description": "",
//"modified": "2010-08-09T13:45:16Z",
//"generator": "http://www.flickr.com/",

string json = "{success:true,";
json+="\"items\":[";
if (Directory.Exists(path))
{
string[] fileEntries = Directory.GetFiles(path);
//限定只能上传jpg和gif图片
string[] allowExtension = { ".jpg", ".gif", ".png" };
foreach (string fileName in fileEntries)
{
FileInfo fileInfo = new FileInfo(fileName);
string fileSize = fileInfo.Length.ToString();

//取得文件的扩展名,并转换成小写
string fileExtension = Path.GetExtension(fileName).ToLower();
//对上传的文件的类型进行一个个匹对
for (int i = 0; i < allowExtension.Length; i++)
{
if (fileExtension == allowExtension[i])
{
string myFileName = fileName.Replace(path, "");
json += "{\"href\":\"" + lpdir + myFileName + "\",\"src\":\"" + lpdir + myFileName + "\",\"title\":\"" + myFileName + "\"},";
}
}
}
}
else
{
context.Response.Write(path + " is not a valid file or directory.");
}
json += "]}";
json = json.Replace(",]}", "]}");
SystemError.CreateErrorLog(json);
context.Response.Write(json);
}

[angelrand]

sorry everyone
class jsonp aim to load remote domain Script and get data back
i just find the data that return
code before is wrong