Display image from an url in Sencha Touch

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

题

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.

有帮助吗？

解决方案

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);
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top