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,246
    Answers
    1
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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,246
    Answers
    1
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi