1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default Unanswered: Setting height of Panel to accomodate Grids

    Unanswered: Setting height of Panel to accomodate Grids


    Hi there,

    I have a panel which has multiple grids in it. Right now I have to set the height explictly of the panel to display all the grids. Is there any way I can set it to % or auto so that I don't have to set a static height . Here is panel definition and grid definition. All of the definitions are the same.

    Code:
    sentry.ResultPanel = Ext.extend(Ext.Panel, {
        id:'resultContainer',
        height:1500,
        frame:false,
       forceFit:true,
        scroll:true,
        resize:true,
    
    
    
    
        layout:{
            type:'vbox',
            align:'stretch'
        }
    })
    My grid is as follows

    Code:
    this.gridPanel = new Ext.grid.GridPanel({
    
    
            autoScroll : true,
            id : 'FeResultsView',
    		title: 'Finance Account',
            stripeRows : true,
            margins : '0',
            height:200,
            forceFit : true,
            loadMask:true,
    
    
            cls:'mygrid',
            columnLines : true,
            tbar:[],
            store : parent.store,
            cm : new Ext.grid.ColumnModel({
                columns : [{
                    header : 'Finance Account',
                    width : 150,
                    dataIndex : 'finAccount'
                },  {
                    header : 'Account Type',  
                    width : 150,
                    dataIndex : 'accountType'
                }, {
                    header : 'Institution',
    				width : 150,
                    dataIndex : 'institution'
                }, {
                    header : 'Associated Entity', 
                    width : 150,
                    dataIndex : 'associatedEntity'
                }, {
                    header : 'Group Id',
    				 width : 100,
                    dataIndex : 'groupID'
                }, {
                    header : 'Date Of Info', 
                    width : 400,
                    dataIndex : 'dateOfInfo'
                }],
                defaults : {
                    sortable : true,
                    menuDisabled : false,
                    width : 150
                },
                viewConfig: {
            forceFit:true
        }
            }),
    
    
            sm : new Ext.grid.RowSelectionModel({
                singleSelect : true
      
            }),
         
            trackMouseOver : true
            //bbar : parent.pager //zz :disable page bar 
        });

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    Not sure what you are going for here. Do you want the parent to be the size of its children or the children to stretch to the size of the parent? If you don't have a layout it will be the size of its children assuming you have given them heights and don't have a height on the parent. If you do use a layout such as vbox you can specify percentages on the children to take up the parent assuming you have a height on the parent. In almost every situation I have encountered, I want the children to stretch to the size of the parent.

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    What I need is this

    I have 6 grids in the parent panel. Unless I increase the height of the grid I cannot add any other grid. I need to change so that so that when new grids are added to the panel, I don't have to keep adjusting the height of the parent to accomodate that. Let me know if that makes sense.

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    If your parent panel has a fixed height or if it is managed by the parent's parent you can set autoScroll: true on it. Then, if the children have fixed heights it will scroll when they take up too much space. Does that work for you or are you looking for different behavior?

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    IF I remove the height of my parent and set autoscroll = true my grids are not being displayed. HEre is the parent Grid in which all the grids are defined

    Code:
    sentry.ResultPanel = Ext.extend(Ext.Panel, {
        id:'resultContainer',
        frame:false,
        autoScroll:true,
        resize:true,
        forceFit:true,
    
    
        layout:{
            type:'vbox',
            align:'stretch'
        },
        initComponent:function () {
    
    
            console.log(sentry)
            sentry.sentryQueryForm.nameResultsGrid = new NameResultsGrid(sentry.sentryQueryForm);
            sentry.sentryQueryForm.phoneResultsGrid = new PhoneResultsGrid(sentry.sentryQueryForm);
            sentry.sentryQueryForm.fcResultsGrid = new FcResultsGrid(sentry.sentryQueryForm);
            sentry.sentryQueryForm.mtResultsGrid = new MtResultsGrid(sentry.sentryQueryForm);
            sentry.sentryQueryForm.irResultsGrid = new IrResultsGrid(sentry.sentryQueryForm);
            sentry.sentryQueryForm.tcResultGrid = new TcResultsGrid(sentry.sentryQueryForm);
    
    
            sentry.sentryQueryForm.nameGrid = sentry.sentryQueryForm.nameResultsGrid;
            sentry.sentryQueryForm.phoneGrid = sentry.sentryQueryForm.phoneResultsGrid;
            sentry.sentryQueryForm.fcGrid = sentry.sentryQueryForm.fcResultsGrid;
            sentry.sentryQueryForm.mtGrid = sentry.sentryQueryForm.mtResultsGrid;
            sentry.sentryQueryForm.irResultGrid = sentry.sentryQueryForm.irResultsGrid;
    
    
            console.log(sentry.sentryQueryForm.tcResultGrid);
            var config = {
                items:[sentry.sentryQueryForm.nameResultsGrid.gridPanel, sentry.sentryQueryForm.phoneResultsGrid.gridPanel, sentry.sentryQueryForm.tcResultGrid.gridPanel ,sentry.sentryQueryForm.irResultsGrid.gridPanel,
                   sentry.sentryQueryForm.fcResultsGrid.gridPanel,sentry.sentryQueryForm.mtResultsGrid.gridPanel]
            };
    
    
    
    
            Ext.apply(this, config);
            sentry.ResultPanel.superclass.initComponent.apply(this, arguments);
        }

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    You need to have a height on the parent or have it managed by its parent for autoScroll to make any sense. Do your grids have heights?

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    My grids have height. The way I'm adding the panel is as follows
    Code:
     new sentry.ResultPanel().render(document.body)

  8. #8
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    Why are you rendering it directly to the body? Do you want it to take up the whole page? In that case you would use a viewport. If you are trying to render multiple components to the body, that is not the correct way to do it.

  9. #9
    Sencha User
    Join Date
    Nov 2008
    Posts
    37
    Vote Rating
    0
    harjits is on a distinguished road

      0  

    Default


    For some reasons when I have this

    Code:
     var find =  new sentry.FindWrapperPanel()
         var results = new sentry.ResultPanel()
         var viewP = new Ext.Viewport({
         layout : 'fit',
         autoScroll:true,
         items : [find,results]
         });
    it doesn't show the results panel and hence I had to do this....

  10. #10
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    layout: 'fit' stretches the first child to the parent container's full width and height. You would want a vbox with align stretch. Then you would probably put a height on your find component and a flex: 1 on your results component.

Thread Participants: 1

Tags for this Thread