Fit to parent

[Animal]

The Ext.namespace statement?

[Animal]

A suggestion here.

How about adding a monitorWindowResize option so that it automatically refits the Component to its parent on window resize.

This would be useful for when the parent element is sized using %ages.

Then we could help this guy: http://extjs.com/forum/showthread.php?t=66606

[Animal]

so

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    constructor: function(parent, monitorWindowResize) {
        this.parent = parent;
        if (monitorWindowResize) {
            Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
        }
    },
    init: function(c) {
        c.on('render', function(c) {
            c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
        }, this, {single: true});
        c.monitorResize = true;
        c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
    },
    fitSizeToParent: function() {
        var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
        this.setSize(size.width - pos[0], size.height - pos[1]);
    }
});

[Condor]

onWindowResize isn't required when the plugin is applied to a Container, but it is always required when the Component isn't a Container.

So I would suggest:

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    constructor: function(parent) {
        this.parent = parent;
    },
    init: function(c) {
        c.on('render', function(c) {
            c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
            if(!c.doLayout){
                this.fitSizeToParent();
                Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
            }
        }, this, {single: true});
        if(c.doLayout){
            c.monitorResize = true;
            c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
        }
    },
    fitSizeToParent: function() {
        var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
        this.setSize(size.width - pos[0], size.height - pos[1]);
    }
});

(you need to call fitSizeToParent and attach the onWindowResize after the component is rendered)

[bjmiller]

So, what ended up being the final version of this plugin for 2.x? Lots of code snippets here.

[Condor]

I've updated the first post with the last code (most changes were minor, so it didn't really matter which version you used).

[bjmiller]

Thank you!

[whdanj]

It is great to find this plug in, I am trying to use it.

In my application, I put a tabpanel into a div (fromContainer), I develop on 1280x1024 screen resolution, everything looks fine.

But users use 1024x768 resolution, then some content of my page (most right side, bottom page) got cut off, I can not see them.

I tried to use the plug in, but it's not working, only tabs displayed, the content of the tabs does not show at all. please help, thanks a lot!



My jsp file:

     <div id="formContainer" style="width:100%; height:100%; overflow:hidden"> 
     </div>

My tab panel:

   // Here is the MAIN SOURCE TAB     
    var tabs = new Ext.TabPanel({
        renderTo: document.getElementById("formContainer"),
        activeTab: 1,
        plugins: [new Ext.ux.plugins.FitToParent()],
        layoutOnTabChange: true,
        //layout:'fit',
        items:
        [
        // Add Source Tab
        {
            title: 'Add Source',
            bodyStyle:'text-align:left;',
            cls: 'left-right-buttons',
            frame:true,
            items: [addSourceForm,addSourceResult]
        },
        
        // Search Source Tab
        {
            title: 'Search Source',
            cls: 'left-right-buttons',
            defaults:{autoScroll: true},
            items: 
            [{items: new Ext.Panel
             ({
                height:650,
                width:1140,
                layout:'border',
                defaults: {
                    bodyStyle: 'padding:5px'
                    ,labelStyle:'font-weight: bold'
                    ,bodyStyle:"background-color:#DED8C7"
                    ,autoScroll: true
                },
                items:[{
                    title:"<font size=2>Searching Options</font>",
                    region:"west",
                    width:300,
                    minSize:100,
                    maxSize:300,
                    collapsible:true,
                    margins: '5 0 0 5',
                    items: searchForm
                    },{
                    title: '<font size=2>Source Detail Viewer</font>',
                    collapsible: false,
                    region:'east',
                    margins: '5 0 0 0',
                    width: 280,
                    items: detailForm
                    },{
                    title: '<font size=2>Source List</font>',
                    collapsible: false,
                    region:'center',
                    margins: '5 0 0 0',
                    id: 'sourceViewer',
                    layout: 'fit',
                    autoScroll: true,
                    //width: 580,
                    //defaults:{autoWidth: true},
                    items: sourceGrid
                    }]
               })
             }]
        },

        // My sources Tab
        {
         title: 'My Sources',
         cls: 'left-right-buttons',
         defaults:{autoScroll: true},
         items: 
            [{items: new Ext.Panel
                 ({
                  height:650,
                  width:1140,
                  layout:'border',
                  defaults: {
                  //split: true,
                  bodyStyle: 'padding:5px'
                 ,labelStyle:'font-weight: bold'
                 ,bodyStyle:"background-color:#DED8C7"
                 ,autoScroll: true
                  }
                 ,items:[{
                        title: '<font size=2>Source Detail</font>',
                         collapsible: false,
                         region:'east',
                         id:'pendingSourceViewer',
                         //margins: '5 0 0 0',
                         width: 280,
                         items: mySourceDetailForm
                        },
                        {
                        title: '<font size=2>My Source List</font>',
                        collapsible: false,
                        region:'center',
                        //margins: '5 0 0 0',
                        id: 'allMySources',
                        layout: 'fit',
                        autoScroll: true,
                        //width: 580,
                        //defaults:{autoWidth: true},
                        items: mySourceGrid
                      }]
                })
             }]
          }//end of my Source tab
        ]//end of tab items
    });  //end of tab panel

[Animal]

If you want to use the full browser window, use a Viewport.

[whdanj]

If you want to use the full browser window, use a Viewport.

Thanks. I have not used Viewport before, could you please give more details?

My layout:

 div (formContainer)
               |
         tabPanel
|             |                                           |
tab1        tab2                                     tab3
(form)     (borderLayout in panel2)          (borderLayout in panel3)

so should I put my tabPanel into the viewport? or put panel2(panel3) into the ViewPort?

thanks a lot!