Display image from an url in Sencha Touch

StackOverflow https://stackoverflow.com/questions/23531958

Question

I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.

This is html code. Index.html

<html><head>
<title>Hello World</title>
<style>
.hello {
    background:#000000;
    background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
    background:#ffffff;
            background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
            background-repeat:no-repeat;
        }
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

This is the code for app.js

requires: [
    'Ext.MessageBox'
],

views: [
    'Main'
],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
this.tabs = new Ext.TabPanel({
    fullscreen: true,
    tabBar: {
        ui: 'light',
        layout: {
            pack:'center'
        }
    },
    items: [
        {docked:'top', xtype:'toolbar', title:'Hello World'},
        {cls:'hello', title:'Hello'},
        {cls:'world', title:'World'}
    ]
    });

}

Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/ can any one help me solve this problem. Thank you.

Était-ce utile?

La solution

At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.

launch: function () {
    ...
    Ext.Viewport.add(this.tabs);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top