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

      0  

    Default


    It's up to you!

    Read the docs, read the examples.

    http://extjs.com/deploy/ext-3.0-rc1....s=Ext.Viewport

    Not forgetting that inheritance diagram at the top right... Viewport is a Container, and the following tells you all you need to know: http://extjs.com/deploy/ext-3.0-rc1....=Ext.Container

  2. #42
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Thumbs up Thanks!

    Thanks!


    Thank you for the plugin - the thing I've been looking for!
    Just one thing, I need to set the <div> I use as container, like:

    Code:
    plugins: [new Ext.ux.plugins.FitToParent('targetDivId')]
    Maybe include it to example - will save a minute of experiments

  3. #43
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Question Find sth interesting

    Find sth interesting


    IE6. Press F11. One more time (exit fs mode).
    Width dimension of the panel stacks at the value which was set for fs mode.

  4. #44
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    This isnt working with ie8 for some reason...its working fine with all the other browsers....as usual.

  5. #45
    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


    Quote Originally Posted by Maxrunner View Post
    This isnt working with ie8 for some reason...its working fine with all the other browsers....as usual.
    Are you sure the parent is changing size?

    Can you post a simple example (HTML + javascript)?

  6. #46
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    Yes here it is:

    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]);
            }
        });
    
        
          Ext.onReady(function(){
    
            // second tabs built from JS
            var tabs2 = new Ext.TabPanel({
                renderTo: 'tabPanelWrapper',        
                plugins: [new Ext.ux.plugins.FitToParent("tabPanelWrapper")],
                activeTab: 0,
               //autoHeight:true,
                autoWidth:true,
                plain:false,
                defaults:{autoScroll: true},
                items:[{
                        title: 'Requerente',
                        autoLoad: {url: 'displayconteudo.do2', params: 'tab=dadosRequerente&numero=${param['numero']}', scripts: true}
                    },{
                        title: 'Documentos Anexados',
                        autoLoad: {url: 'displayconteudo.do2', params: 'tab=listDocumentos&numero=${param['numero']}', scripts: true}
                    },{
                        title: 'Histórico do Processo',
                        autoLoad: {url: 'displayconteudo.do2', params: 'tab=historico&numero=${param['numero']}', scripts: true}
                    },{
                        title: 'Informações',
                        autoLoad: {url: 'displayconteudo.do2', params: 'tab=informacoes&numero=${param['numero']}', scripts: true}
                    },{
                        title: 'Etapas',
                        autoLoad: {url: 'displayconteudo.do2', params: 'tab=etapas&numero=${param['numero']}', scripts: true}
                    }
                ]
            });
    
    
    
    <div id="tabPanelWrapper" style='width: auto;overflow:hidden'></div>

  7. #47
    Ext User
    Join Date
    Mar 2009
    Posts
    29
    Vote Rating
    0
    zyon is on a distinguished road

      0  

    Default


    Hi
    I am using this plugin,but it looks like i have to set a fixed height to the parent element in order to work.Is there a way to set a procentual height to parent too?


    Html:
    Code:
    div id="center" style='height:1000px;'>
            <div id="colorToolbar"></div>
            <div id="companiesGrid" style='overflow:hidden;height:100%;width:100%'></div>
    Viewport:

    Code:
        var viewport = new Ext.Viewport([
               
               {
                region: 'center',
                xtype: 'panel',
                contentEl: 'center',
            
            }, {
                id: 'companyDetailsRegion',
                region: 'south',
                title: 'Double click a company from the list above to see its details',
                collapsible: true,
                contentEl: 'south',
                frame : true,
                split: true,
                collapsed: true,
                }
                ]);
    Grid:
    Code:
         
          var grid = new Ext.grid.GridPanel({
              id: 'companiesGrid', 
              ds: ds,          
            cm: cm,         
              enableColLock: false,
            loadMask: true,           
            view: new Ext.grid.GridView({         
                autoFill: true
            }),
             plugins:  [filters, new Ext.ux.plugins.FitToParent()],         
            el: 'companiesGrid',        
            renderTo: 'companiesGrid',
              autoExpandColumn:'CompanyName'
        });
    
        
        grid.render();

  8. #48
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    Ive just decided to use the defaults:{autoHeight:true}, it works with IE too.

  9. #49
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
    aleksf is on a distinguished road

      0  

    Default Grid in iframe not resizing on window maximize

    Grid in iframe not resizing on window maximize


    I have a grid:
    Code:
    var grid = new Ext.grid.GridPanel({
            width:'100%',
            autoHeight: true,
            title:'Beam Caster Heat List',
            store: store,
            trackMouseOver:false,
            disableSelection:false,
            loadMask: true,
            border:false,
            plugins: [new Ext.ux.plugins.FitToParent()],
            cm: new Ext.grid.ColumnModel([
                {header: "Col1", dataIndex: 'COL1', width: 60, sortable: true} // ... etc
            ]),
            viewConfig: {
                forceFit:true,
                enableRowBody:false,
                showPreview:false
            },
            bbar: toolBar
        });
    grid.render('list-grid');
    // ...
    <div id="list-grid" style="overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0;" />
    The grid is part of a HTML page rendered in an iframe:

    Code:
    <iframe id="tabProd" class="x-hide-display" width="100%" height="100%"></iframe>
    When the window is resized by dragging the border, both iframe and grid resize to fit. The problem is that, when the window is maximized or de-maximized, the iframe resizes fine with the window , but the grid does not resize with the iframe. It looks like the event does not get triggered. I have tried with just layout: 'fit' for the grid (without the FitToParent plugin) , but with same result.

    What am I missing here?

    TIA

    Alex

  10. #50
    Sencha User benmclendon's Avatar
    Join Date
    Jul 2008
    Location
    Valdosta, GA
    Posts
    70
    Vote Rating
    1
    benmclendon is on a distinguished road

      0  

    Default


    I think it would work if you put the grid inside a border layout.

    e.g.

    Code:
    var viewport = new Ext.Viewport({
    	layout : 'border',
    	items  : [{
    		region : 'center',
    		border : false,
    		layout: 'fit',
    		items : grid
    	}]
    });
    Ben McLendon
    IT Manager and part-time: coder, photographer, designer, etc...
    Centos(rackspace), Apache, MySQL, PHP, ExtJS,OSX
    http://www.linkedin.com/in/benmclendon
    http://www.barneshc.com
    - http://www.audiedigitalmedia.com