Hybrid 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!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Answers
    1
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

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

      0  

    Default


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

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

      0  

    Default


    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????

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Answers
    1
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

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

      0  

    Default


    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

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

      0  

    Default


    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);
    }

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

      0  

    Default


    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

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar