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