1. #31
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The Ext.namespace statement?

  2. #32
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

  3. #33
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    so

    Code:
    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]);
        }
    });

  4. #34
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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:
    Code:
    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)

  5. #35
    Ext User
    Join Date
    Jun 2008
    Location
    New York, NY
    Posts
    2
    Vote Rating
    0
    bjmiller is on a distinguished road

      0  

    Default 2.x final?

    2.x final?


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

  6. #36
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  7. #37
    Ext User
    Join Date
    Jun 2008
    Location
    New York, NY
    Posts
    2
    Vote Rating
    0
    bjmiller is on a distinguished road

      0  

    Default


    Thank you!

  8. #38
    Ext User
    Join Date
    Feb 2009
    Posts
    46
    Vote Rating
    0
    whdanj is on a distinguished road

      0  

    Default


    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:

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

    Code:
       // 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

  9. #39
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  10. #40
    Ext User
    Join Date
    Feb 2009
    Posts
    46
    Vote Rating
    0
    whdanj is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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:

    Code:
     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!