0
votes

I am using sencha 2.3.1 and the following code (in app.js), to display some html content on page. But nothing is being displayed. Please tell where I am wrong.

Ext.application({
    name: 'Sencha',


    requires: ['Ext.tab.Panel'],

    launch: function() {
        //The whole app UI lives in this tab panel
        Ext.Viewport.add({
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                // This is the home page, just some simple html
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    scrollable: true,
                    html: [
                        '<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>Building the Getting Started app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                }

              ]

           })

        }

});
1

1 Answers

0
votes

Did a quick check in Sencha Fiddle, and your content seems to display.

https://fiddle.sencha.com/#fiddle/48m

However, I see you attached a cls property to this tabpanel, perhaps this is causing your problem.

Also, often things do not show up in Sencha because the height of the component is zero. Open up your DOM inspector and find your tabpanel and child elements and make sure they have a height of greater than zero. You may need to define a height, or use a different layout such as fit.