1. #31
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar