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.

Was it helpful?

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);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top