Question

I am trying to display static text in sencha touch app but it is not showing that text. Perhaps the reason is that I am extending from Ext.Panel rather than Ext.tab.Panel. But I do not want to display tabs at all. Here is my code

Main.js

Ext.define('HB.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',

requires: [
    'Ext.TitleBar'
],

config: {
    items: [
        {
            xtype: 'search'
        }
    ]
}
});

Search.js

Ext.define('HB.view.Search', {
extend: 'Ext.form.Panel',
xtype: 'search',

config: {
    title: 'Search',
    layout: 'fit',
    scrollable: true,
    styleHtmlContent: true,
    styleHtmlCls: 'searchpage',
    html: ['<h1>Welcome to MyApp</h1>'].join(''),

    items: [
        {
            xtype: 'titlebar',
            title: 'Search Page',
            docked: 'top'
        }
    ]
}
});

And I added the views in app.js like follow

views: ['Main','Search'],

With my above code I cannot see this text Welcome to MyApp on that page. Why and how can I fix this?

Answer 1

Add following config to your Search.js view :

style:'height:'+(Ext.getBody().getHeight())+'px;',

Or

EDIT :

Here problem is with Height only, you need to assign Height to your formpanel declaration when you are adding this to your parent panel.

fullscreen: true,
height:Ext.getBody().getHeight(),

Height and Style properties are not deprecated with sencha 2.1 :

Height

Style

Thanks.