Search code examples
javascriptextjssencha-touch-2

How sencha image url display on my carousel


I have encounter a problem, the console said my image url is not found. But it displayed well when I directly write in carousel-items-html-src,but it's not working when I use carousel.add to use data in my json.

i have found the cause:the image url is right,but when it in pass course.the image url will auto add a '/' character in the end,so cant display. what can i do?

my controller code:

Ext.define('ylp2p.controller.loadpic',{
extend: 'Ext.app.Controller',
launch: function(){
    var storeId = Ext.create('ylp2p.store.picstore');
    var imagecarousel = Ext.getCmp('imagecarousel');
    storeId.load({
        callback: function(records,operation,success){
            Ext.each(records,function(record){
            imagecarousel.add({html: '<img src='+record.get('url')+'/>'});---is it right?
            });
        }
    });
}
});

the carousel in my view(part code):

{
                        xtype: 'carousel',
                        height: 300,
                        id: 'imagecarousel',
                        store: 'picstore'
},//end carousel

my json code:

{
"image" : [
        {"name" : "cat", "url": "http://bleachthemind.files.wordpress.com/2010/08/cute-bunnys-domestic-animals-2785589-1024-768.jpg"},
        {"name" : "lion", "url": "http://images1.fanpop.com/images/photos/2600000/Cheetah-Family-wild-animals-2603080-1280-1024.jpg"},
        {"name" : "cat", "url": "http://bleachthemind.files.wordpress.com/2010/08/cute-bunnys-domestic-animals-2785589-1024-768.jpg"}        
]
}

the console said:

"GET https://bleachthemind.files.wordpress.com/2010/08/cute-bunnys-domestic-animals-2785589-1024-768.jpg/ 404 (Not Found)"

Solution

  • i got it

    imagecarousel.add({html: '<img src='+record.get('url')+' height="100%" width="100%"/>'});