Results 1 to 7 of 7

Thread: Image Slideshow in ExtJs without Using Carousel

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Philippines
    Posts
    14

    Default Answered: Image Slideshow in ExtJs without Using Carousel

    Hi, is it possible to implement an image slideshow in ExtJS with the use of Ext Carousel.

    I tried implementing it using dataview and templates, can you give me any suggestion to go about this?

    Regards,
    Jonas

  2. Create a panel using tpl:

    tpl: '<img class="your-styling" src="{url}" />'

    Then setup a timer that when fired calls:

    panel.update ({
    url: newUrl
    });

  3. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20

    Default

    Create a panel using tpl:

    tpl: '<img class="your-styling" src="{url}" />'

    Then setup a timer that when fired calls:

    panel.update ({
    url: newUrl
    });

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Location
    Philippines
    Posts
    14

    Default

    Hi James, I tried using your solution but I decided to use to use update html instead. My question to you is how can I setup a timer. so here is my code.

    Code:
                        new Ext.Panel
                        ({
                            id: 'top_center_panel',
                            height: 175,
                            width: 616,
                            border: false,
                            html: '<img src="../pictures/online_store_banner.jpg" height = 175 width = 616>'
                        }),
    here, I created a panel and inside this panel is a html config. So my main concern is how can I make the image change at a certain time. here is my code on changing the image.

    Code:
                        Ext.getCmp('top_center_panel').update
                        ({
                            html: '<img src="../pictures/ducati848.jpg">'
                        });
    Regards, JsNoob

  5. #4
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20

    Default

    JavaScript has a basic timer but you have to use bind because it doesn't support scope. I'd recommend using Ext.TaskMgr.

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Location
    Philippines
    Posts
    14

    Default

    Thanks bro it worked

    Regards,
    JsNoob

  7. #6

    Default using <img ..> in exts

    Ext.require('Ext.panel.Panel');
    Ext.onReady(function() {
    new Ext.Panel({
    renderTo:'lay-out',
    title: 'hinh anh',
    items: [{
    border: false,
    html: "<img class='your-styling' src='2.ipg' with='200px' height='200px'/>",
    //tpl: "<img class='your-styling' src='2.ipg' with='200px' height='200px' />",
    xtype: "panel"}

    ]
    });
    });
    no show image???/
    why??
    thanhks your!!!!!!!!!!!!!!!!!!!!!111

  8. #7
    Sencha User
    Join Date
    Oct 2012
    Location
    Philippines
    Posts
    14

    Default

    Quote Originally Posted by lucbinhdinh View Post
    Ext.require('Ext.panel.Panel');
    Ext.onReady(function() {
    new Ext.Panel({
    renderTo:'lay-out',
    title: 'hinh anh',
    items: [{
    border: false,
    html: "<img class='your-styling' src='2.ipg' with='200px' height='200px'/>",
    //tpl: "<img class='your-styling' src='2.ipg' with='200px' height='200px' />",
    xtype: "panel"}

    ]
    });
    });
    no show image???/
    why??
    thanhks your!!!!!!!!!!!!!!!!!!!!!111
    Hi Bro,

    I think the browser could not detect your image, make sure the file path is correct. Also there is some error in your code. To fix this, you should remove xtype:"panel", because you already initialized new ext.panel, also you should change with=200 to width='200'. Hope it helps

    Regards,
    JsNoob

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •