Docking issues with panels

**AlexLans** · 23 Jan 2012 12:54 AM

Hello,

I've made this code, but I can't get the bottom panel to show. I'm working at it now for a few days, but I can't figure it out.

Code:

Ext.setup({
    tabletStartupScreen: 'images/Norma/MI-logo-transparant.png',
    phoneStartupScreen: 'images/Norma/MI-logo-transparant.png',
    icon: 'images/Norma/Norma.png',
    glossOnIcon: false,
    name: 'normamobile',

    onReady: function () {
        var app = this;

        // construct UI
        var viewport = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'fit',
            showingPage: false,
            showingSplash: true
        });

        // the toolbar across the top of the app, containing the buttons
        var topBar = Ext.create('Ext.TitleBar', {
            ui: 'dark',
            height: 92,
            docked: 'top',
            title: 'Norma Mobile'
        });

        // creates the top banner with patient info
        var topbarPanel = Ext.create('Ext.Panel', {
            height: 92,
            docked: 'top',
            items: [topBar]
        });

        var bottomBar = Ext.create('Ext.TitleBar', {
            ui: 'dark',
            height: 46,
            docked: 'bottom',
            title: 'Bottom Bar'
        });

        var bottomPanel = Ext.create('Ext.Panel', {
            docked: 'bottom',
            height: 46,
            items: [bottomBar]
        });

        // the page that displays each chapter and holds the carousel
        var page = Ext.create('Ext.Panel', {
            cls: 'page',
            ui: 'dark',
            layout: {
                type: 'fit'
            },
            items: [topbarPanel, bottomPanel]
        });

        //stitch the UI together and create an entry page
        viewport.add(page);
     }
});

Thank you.

rdougan

It looks like your over nesting may be valid, if this is only the basics of your UI (which I assume it is).

Anyhow, it looks like you are not including a DOCTYPE in your index.html file. Simply add the following code at the top of index.html:

Code:

<!doctype html>

And it'll work.

**mitchellsimoens** · 23 Jan 2012 7:31 AM

Just looking at your code and it seems you are overnesting and not using layouts on some classes that you should be. You can check the DOM to see if something is rendered but has heigh tof 0px to confirm that you need to use a layout or set a height. height will not always just work.

**jay@moduscreate.com** · 23 Jan 2012 9:26 AM

Please look at how types are used in the framework. They will ultimately help you reduce code weight.

**rdougan** · 23 Jan 2012 10:05 AM

It looks like your over nesting may be valid, if this is only the basics of your UI (which I assume it is).

Anyhow, it looks like you are not including a DOCTYPE in your index.html file. Simply add the following code at the top of index.html:

Code:

<!doctype html>

And it'll work.

**AlexLans** · 23 Jan 2012 11:24 PM

@ rdougan, indeed I misted the 'html' part

sorry for bothering you guys.
Thank you for all the help.

Docking issues with panels

Thread Tools

Search Thread

Display

Answered: Docking issues with panels

Answered: Docking issues with panels