Results 1 to 10 of 10

Thread: extjs 4 autoResize viewport base on the max height of the items inside the viewport

  1. #1

    Default extjs 4 autoResize viewport base on the max height of the items inside the viewport

    Anyone know how to do that?

  2. #2
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,121
    Answers
    14

    Default

    Viewport is a specialized container representing the 'browser viewport' and thus sizes itself to the browser's viewport and not the items inside. So instead of a viewport, why not just use a panel which will do the auto resizing for you automatically.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    https://www.sencha.com/forum/showthr...o-report-a-bug

  3. #3

    Default

    i try
    PHP Code:
           autoWidth:true,
        
    autoHeight:true,
        
    //autoScroll : true,
        
    layout 'border'
    ,
    but it come out as no height;

  4. #4
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,121
    Answers
    14

    Default

    hmm ok then, I'll dig into it in a little while then for you.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    https://www.sencha.com/forum/showthr...o-report-a-bug

  5. #5

    Default

    i also try to manually change the height of the viewport and it didn't work.
    PHP Code:
    var center = new Ext.Panel({
            
    region:'center',
            
    html:'center'
        
    })
        var 
    east = new Ext.Panel({
            
    region:'east',
            
    html:'east',
            
    width:200,
            
    height:2000
        
    })
        var 
    west = new Ext.Panel({
            
    region:'west',
            
    //autoScroll:true,
            
    html:'west<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
            
    +'<br/><br/><br/><br/><br/><br/>end',
            
    width:200,
            
    height:1500
        
    })
        var 
    view Ext.create('Ext.container.Viewport',{
            
    layout:'border',
            
    autoScroll:true,
            
    items:[center,east,west]
        })    
         
    view.render(Ext.getBody()); 
         
    view.setHeight(2500); 
    The purpose of this is to make sure no scrollbar will appear, maybe except grid, and let the browser control the scrolling

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    Setting a size on viewport has no effect, viewport always takes all available space of the browser ignoring any other sizes.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #7

    Default

    any update on this?

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    What exactly are you trying to achieve? Any attempt to set a size on Viewport is not the way to go as Viewport always takes the all available space and that won't change.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #9

    Default

    OK. Let say the most outer is a panel. how to i make this panel auto resize basic on the items. the items are panels that containing other panel which can be any layout. What i am trying to achieve is the whole application will not have any vertical scroll bar other than grid and windows.

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    In Ext 4 you just don't specify any height and the panel should vertically resize as expected. Here is an example of such grid:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Flexible grid height example by Saki</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="ext-4.0.5/resources/css/ext-all.css" type="text/css">
        <link rel="shortcut icon" type="image/png" href="../Icon.png">
        <script type="text/javascript" src="ext-4.0.5/ext-all-debug.js"></script>
        <script type="text/javascript">
    
        
        // entry point
        Ext.onReady(function() {
            var data1 = [
                {id:1, text:'Item 1'}
            ];
            var data5 = [
                 {id:1, text:'Item 1'}
                ,{id:2, text:'Item 2'}
                ,{id:3, text:'Item 3'}
                ,{id:4, text:'Item 4'}
                ,{id:5, text:'Item 5'}
            ];
            var data10 = [
                 {id:1, text:'Item 1'}
                ,{id:2, text:'Item 2'}
                ,{id:3, text:'Item 3'}
                ,{id:4, text:'Item 4'}
                ,{id:5, text:'Item 5'}
                ,{id:6, text:'Item 6'}
                ,{id:7, text:'Item 7'}
                ,{id:8, text:'Item 8'}
                ,{id:9, text:'Item 9'}
                ,{id:10, text:'Item 10'}
            ];
    
            var g = Ext.create('Ext.grid.Panel', {
                store:{
                    fields:['id', 'text']
                }
                ,columns:[{
                     header:'Text'
                    ,dataIndex:'text'
                }]
                ,forceFit:true
                ,viewConfig:{
                     emptyText:'No records found'
                    ,deferEmptyText:false
                }
                ,dockedItems:[{
                     xtype:'toolbar'
                    ,dock:'top'
                    ,items:[{
                         xtype:'button'
                        ,text:'Load 1'
                        ,handler:function() {
                            this.up('gridpanel').getStore().loadData(data1);
                        }
                    },{
                         xtype:'button'
                        ,text:'Load 5'
                        ,handler:function() {
                            this.up('gridpanel').getStore().loadData(data5);
                        }
                    },{
                         xtype:'button'
                        ,text:'Load 10'
                        ,handler:function() {
                            this.up('gridpanel').getStore().loadData(data10);
                        }
                    }]
                }]
                ,renderTo:'grid'
                ,width:200
    //          ,height:200
            });
        }); // eo onReady
        
        </script>
    </head>
    <body>
    <div id="grid"></div>
    <div style="border:solid 1px silver;background:#f8f8f8;width:200px;margin-top:10px;text-align:center">After Grid</div>
    </body>
    </html>
    <!-- eof -->
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


Posting Permissions

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