Results 1 to 4 of 4

Thread: Showing a collapsed/expanded window in full screen???

  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    127

    Default Showing a collapsed/expanded window in full screen???

    Just curious, I have a series of gridpanel listboxes showing data and the interface has become somewhat convoluted/complicated.

    I added some collapsible buttons to the panels to allow users to hide the various panels but what is truly desired is an additional button (beside the collapsible button) which when clicked would capture the entire screen and thus de-clutter the interface until they were done at which point returning back to normal would be ideal.

    Is this possible through an extension or custom hack??? Reusing the existing grid panel would be ideal.

    Cheers,
    Alex

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    Can't you just remove the grid from its existing container and add it to a maximized Ext.Window? Then put it back when the window is closed.

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    127

    Default

    Not sure how would I do that? Build window dynamically and reference the listbox? Can you show me how you might do this?

    Cheers,
    Alex

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    Bit like this maybe:

    Code:
    new Ext.Panel({
        height: 300,
        renderTo: Ext.getBody(),
        width: 500,
        items: [
            {
                // Placeholder for when the first panel is moved
                flex: 1,
                items: {border: false, title: 'Panel 1', html: '1 one solo'},
                layout: 'fit',
                tbar: [{text: 'Pop', handler: pop}]
            }, {
                // Placeholder for when the second panel is moved
                flex: 1,
                items: {border: false, title: 'Panel 2', html: '2 two duo'},
                layout: 'fit',
                tbar: [{text: 'Pop', handler: pop}]
            }
        ],
        layout: {
            align: 'stretch',
            type: 'hbox'
        }
    });
    
    function pop() {
        // this is the button, this.ownerCt is the toolbar
        var placeHolder = this.ownerCt.ownerCt;
        var panel = placeHolder.get(0);
    
        var win = new Ext.Window({
            items: panel,
            layout: 'fit',
            maximized: true,
            title: 'Pop',
            listeners: {
                close: function() {
                    placeHolder.add(panel);
                    placeHolder.doLayout();
                }
            }
        });
    
        win.show();
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •