Ability to view entire popup window

[ktoole]

I created a popup window on a screen that had a viewport with a grid. I noticed that when I resized the browser's text with Ctrl+, that the bbar at the bottom of the grid in the view port would just resize and stay in view. This was not the case with the window or the bbar that I had at the bottom of the window. Is there some way, without taking over the entire screen, to make the window resize itself and have the bbar remain on the window when I use CTRL+ in the browser? I have the window set up to allow scrolling and that is fine, but I need to see the bottom of the window too.

This is the code for the Window:

selectionWindowUi = Ext.extend(Ext.Window, {
    width: 860,
    height: 680,
    modal: true,
    closable: false,
    autoScroll: true,
    constrainHeader: true,
    resizable: false,
    initComponent: function() {
        this.items = [
            {
                xtype: 'panel',
                height: 40,
                layout: 'hbox',
                padding: 10,
                flex: 1,
                shim: false,
                animCollapse: false,
                region: 'north',
                id: 'activeCheckPanel',
                items: [
                    {
                        xtype: 'checkbox',
                        boxLabel: 'Active Record?',
                        flex: 1,
                        id: 'activeExhibit'
                    },
                    {
                        xtype: 'spacer',
                        flex: 1,
                        width: 5
                    },
                    {
                        xtype: 'displayfield',
                        value: 'Company',
                        flex: 1,
                        id: 'company'
                    },
                    {
                        xtype: 'spacer',
                        flex: 1,
                        width: 5
                    },
                    {
                        xtype: 'displayfield',
                        value: 'Location',
                        flex: 1,
                        id: 'location'
                    },
                    {
                        xtype: 'spacer',
                        flex: 1,
                        width: 5
                    },
                    {
                        xtype: 'label',
                        text: 'Exhibit Name:',
                        flex: 1,
                        width: 100
                    },
                    {
                        xtype: 'textfield',
                        flex: 1,
                        allowBlank: false,
                        id: 'exhibitName'
                    },
                    {
                        xtype: 'hidden',
                        flex: 1,
                        width: 0,
                        id: 'emCmp'
                    },
                    {
                        xtype: 'hidden',
                        flex: 1,
                        width: 0,
                        id: 'emLoc'
                    }
                ]
            },
            {
                flex: 1,
                region: 'center',
                xtype: 'selectionpanel'
            }
        ];
        this.bbar = {
            xtype: 'toolbar',
            height: 35,
            width: 1387,
            flex: 1,
            items: [
                {
                    xtype: 'button',
                    text: 'Save',
                    icon: '/vvresources/icons/save.gif',
                    ref: '../btnSave',
                    id: 'btnSave'
                },
                {
                    xtype: 'tbseparator'
                },
                {
                    xtype: 'button',
                    text: 'Cancel',
                    icon: '/vvresources/icons/cancel.png',
                    ref: '../btnCancel',
                    id: 'btnCancel'
                }
            ]
        };
        selectionWindowUi.superclass.initComponent.call(this);
    }
});

[richard.milone]

Can you email some screenshots to support@cnxcorp.com so we can see what you're talking about?

[ktoole]

I sent the screens to support@cnxcorp.com and just wondered if anyone had any ideas yet.

[richard.milone]

You got us on this one. Have you tried it in other browsers? The way a page is expanded and reduced is a function of browser logic, not something that you can generally handle in your application code. You may need to just reduce your starting window size so that it's still visible if users expand their screens. You could alternatively try to test the height of the page and resize your window accordingly with an event handler. This is just theory though, I've never actually had the need to do this so it would take some time to experiment. If you need development assistance with this just let us know.

If you need a quick workaround you could put a button on the window tbar that toggles the window size between "large" and "small" to give the user some basic way of resizing the window if the bottom gets chopped off.

[ktoole]

I would like some development assistance with this. The only thing that you should know, is that I am using the Designer to create the window. I would like to keep that in there, it makes it convenient to make simple changes to the screen.

[ktoole]

I figured out how to get the window to resize. I used this.setSize({ width: 860,height: windowHeight-50});
inconjuction with the resize listener to run this function.
onResizeGrid: function(e, adjW, adjH, origW, origH){
windowHeight = adjH;
},
I get the proper window size on the screen based on the browser settings when the window appears. The only flaw, minor to me, is if the user resizes the browser window when the window is on the screen it does not change. I would have to put the same listener on the window to get it to auto adjust once the window is there and that is not that important. Thanks for offering the additional help, but I don't think I need it now.