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

[angelrand]

i got it
use Ext.Ajax.request replace JSONP to implement
js 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.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);
// this.carousel.clear();
// this.carousel.add(this.photoTemplate.append('combo-carousel', { "href": "../../prophoto/recommend/1.jpg", "src": "../../prophoto/recommend/1.jpg", "title": "The First Photo" }));
// this.carousel.add(this.photoTemplate.append('combo-carousel', { "href": "../../prophoto/recommend/2.jpg", "src": "../../prophoto/recommend/2.jpg", "title": "The Second Photo" }));
// this.carousel.refresh().play();
//add as follow so the carousel can get photo when this page show at the first time
//tag='Plants'
//http://api.flickr.com/services/feeds/photos_public.gne will return a json object as
// {{href:"href",title:"title",src:"src"}}
// Ext.ux.JSONP.request('../webcontrols/tree/ProRecGet.ashx', {
// callbackKey: 'jsoncallback',
// params: {
// format: 'json',
// //tags: 'Plants',
// lang: 'en-us'
// },
// callback: this.updatePhotos,
// scope: this
// });

Ext.Ajax.request({
url: '../webcontrols/tree/ProRecGet.ashx',
success: this.updatePhotos,
failure: function(response, opts) {
alert(response.responseText);
}
});

},
//function(response, opts) {
// var obj = Ext.decode(response.responseText);
// //this.updatePhotos(obj);
// Ext.select('#combo-carousel > p').remove();

// carousel.clear();
// Ext.each(obj.images, function(item) {
// //item.src = item.media.m;
// //item.href = item.media.m.replace('_m.jpg', '.jpg');
// carousel.add(this.photoTemplate.append('combo-carousel', item));
// }, this);

// carousel.refresh().play();
//
// }
updatePhotos: function(response, opts) {
var obj = Ext.decode(response.responseText);
Ext.select('#combo-carousel > p').remove();

Ext.ux.ComboExample.carousel.clear();
Ext.each(obj, function(item) {
//item.src = item.media.m;
//item.href = item.media.m.replace('_m.jpg', '.jpg');
Ext.ux.ComboExample.carousel.add(this.photoTemplate.append('combo-carousel', item));
}, Ext.ux.ComboExample);

Ext.ux.ComboExample.carousel.refresh().play();
}
};
call Ext.ux.ComboExample.init();
ashx code
using System;
using System.Data;
using System.Data.OleDb;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using attocms.util;
using System.IO;

namespace attocms.webcontrols.tree
{
/// <summary>
/// $codebehindclassname$ ?????
/// </summary>
public class ProRecGet : IHttpHandler
{

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/";



//string json = "{\"images\":[";
string json = "[";
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 + "\"},";
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);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

code above just return data like
[{'herf':'../path/file.jpg','src':'../pathsrc/file.jpg',title:'title'},{}]