Air viewport and panel

[Bouki]

Hi
I want to have a panel fitting my viewport.
Previously I had :

var window = new Ext.air.Window({
    //...
    items:[panel]
});

Now I want to do this :

var window = new Ext.air.Window({
    //...
    items:[]
});
window.on('complete', function () {
    viewport = window.getViewport();
}, this);
//and later
    viewport.removeAll();
    viewport.add(panel);

However the second code doesn't work : the panel has a limited height or 0 height (depending if it contains extjs components or html)

[makana]

But the panel is added? Does your Ext.air.Window has a layout:'fit' config option? Or rather do a viewport.doLayout(); after adding the panel.

[Bouki]

my panel is as follows :

            panel = new Ext.Panel({
                layout: 'fit',
                region: 'center',
                monitorResize: true,
                border: false,
                id: 'content'
            });

also, adding viewport.doLayout(); after viewport.add(panel); does nothing

I have to mention that if I set a fixed height (eg 500), it works (however the panel does'nt fit viewport)
If the height is not set then the calculated height is 0 or nearly and the panel doesn't show its content

[makana]

The viewport (Ext.air.Window) needs a layout:'fit' config option, not the Panel itself! The viewport is the container for the panel.

[Bouki]

Thanks for your solution

I finally ended up with another issue
My final panel ("test") doesn't show !

Here is the code :

            //at first
            window = new Ext.air.Window({
                win: window.nativeWindow,
                layout: 'fit',
                closable: true,
                trusted: true,
                transparent: false,
                systemChrome: 'none',
                minWidth: 900,
                minHeight: 500
            });
            window.on('complete', function(win) {
                viewport = win.getViewport();
            }, this);
            //...
            //later
            container = new Ext.Panel({
                border: false,
                layout: 'fit'
            });
            panel = new Ext.Panel({
                border: false,
                region: 'center',
                title: 'Accueil',
                layout: 'border',
                items: [],
                id: 'content'
            });
            container.add({
                xtype: 'container',
                layout: {
                    type: 'vbox'
                },
                items: [toolbar1, toolbar2, panel]
            });
            window.setTitle('Bardeen application');
            window.setSize(980, 580);
            viewport.removeAll();
            viewport.add(this.container);
            viewport.doLayout();
            //the panel content will change depending on toolbar click
            //this is the first view when the user hasn't yet clicked
            test = new Ext.Panel({
                padding: "5 5 5 5",
                title: 'Test',
                html: '123456'
            });
            panel.removeAll();
            panel.add(test);
            panel.doLayout();

What is strange is that I can see "panel" but not "test" !
I believe there is an issue with my "panel" config options