Grid height to fit window, on resizing?

[Tuom Larsen]

Dear list,

please, consider the following code (basically it's what I found in the examples here):

data = [
    ['aaaa', 1], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6],
    ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2],
    ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3],
    ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4],
    ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5],
    ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6],
    ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2],
    ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['ffff', 6], ['gggg', 7]
];

Ext.onReady(function() {

    var store = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
            {name: 'title'},
            {name: 'number', type: 'int'},
        ])
    });
    store.loadData(data);
    
    var model = new Ext.grid.ColumnModel([
        {id: 'title', header: 'Title', width: 160, sortable: true, locked: false, dataIndex: 'title'},
        {header: 'Number', width: 100, sortable: true, dataIndex: 'number'}
    ]);
    
    var body = Ext.getBody();
    
    var panel = new Ext.FormPanel({
        id: 'panel',
        frame: true,
        labelAlign: 'left',
        bodyStyle: 'padding: 5px',
        style: 'margin: 10',
//        height: 600,
//        autoHeight: true,
//        autoScroll: true,
        monitorResize: true,
        layout: 'column',
        items: [{
            columnWidth: 1.0, // ???
            layout: 'fit',
            items: {
                xtype: 'grid',
//                height: 500,
//                autoHeight: true,
//                autoScroll: true,
                stripeRows: true,
                ds: store,
                colModel: model,
                selModel: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp('panel').getForm().loadRecord(rec);
                        }
                    }
                }),
                autoExpandColumn: 'title',
                frame: true,
                listeners: {
                    render: function(g) {
                        g.getSelectionModel().selectRow(0);
                    },
                    delay: 10
                }
            }
        },{
            columnWidth: 0.0, // ???
            width: 300,
            xtype: 'fieldset',
            labelWidth: 90,
            defaults: {
                width: 140
            },
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                'margin-left': '10px',
                'margin-right': Ext.isIE6 ? (Ext.isStrict ? '-10px' : '-13px') : '0'
            },
            items: [{
                fieldLabel: 'Title',
                name: 'title'
            },{
                fieldLabel: 'Number',
                name: 'number'
            }]
        }],
        renderTo: body
    });
    
});

It seems to fit the window horizontally, even during resize, which is good. But how do I make it fit vertically as well?

Thanks in advance!

[[email protected]]

one option is to wrap that in an ext.viewport with a layout of 'fit'

[Tuom Larsen]

Thanks for the reply!

Unfortunately, I'm affraid I don't quite understand what you are suggesting..

I tried

data = [
    ['aaaa', 1], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6],
    ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2],
    ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3],
    ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4],
    ['eeee', 5], ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5],
    ['ffff', 6], ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6],
    ['bbbb', 2], ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['bbbb', 2],
    ['cccc', 3], ['dddd', 4], ['eeee', 5], ['ffff', 6], ['ffff', 6], ['gggg', 7]
];

Ext.onReady(function() {

    var store = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
            {name: 'title'},
            {name: 'number', type: 'int'},
        ])
    });
    store.loadData(data);
    
    var model = new Ext.grid.ColumnModel([
        {id: 'title', header: 'Title', width: 160, sortable: true, locked: false, dataIndex: 'title'},
        {header: 'Number', width: 100, sortable: true, dataIndex: 'number'}
    ]);
    
    var body = Ext.getBody();
    
    var panel = new Ext.FormPanel({
        id: 'panel',
        frame: true,
        labelAlign: 'left',
        bodyStyle: 'padding: 5px',
        style: 'margin: 10',
//        height: 600,
//        autoHeight: true,
//        autoScroll: true,
        monitorResize: true,
        layout: 'column',
        items: [{
            columnWidth: 1.0, // ???
            layout: 'fit',
            items: {
                xtype: 'grid',
//                height: 500,
//                autoHeight: true,
//                autoScroll: true,
                stripeRows: true,
                ds: store,
                colModel: model,
                selModel: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp('panel').getForm().loadRecord(rec);
                        }
                    }
                }),
                autoExpandColumn: 'title',
                frame: true,
                listeners: {
                    render: function(g) {
                        g.getSelectionModel().selectRow(0);
                    },
                    delay: 10
                }
            }
        },{
            columnWidth: 0.0, // ???
            width: 300,
            xtype: 'fieldset',
            labelWidth: 90,
            defaults: {
                width: 140
            },
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                'margin-left': '10px',
                'margin-right': Ext.isIE6 ? (Ext.isStrict ? '-10px' : '-13px') : '0'
            },
            items: [{
                fieldLabel: 'Title',
                name: 'title'
            },{
                fieldLabel: 'Number',
                name: 'number'
            }]
        }],
        renderTo: body
    });
    
    var viewport = new Ext.Viewport({
        layout: 'fit',
        items: [
            panel
        ]
    });
    
});

which doesn't work. I was hoping that uncommenting one or the another autoScroll would do it but it didn't.

Could you be, please, more specific?

Are you saying that I should put my "panel" inside viewport? When I uncomment the first autoScroll, the whole "panel" gets a scrollbar but only the grid should...

[Tuom Larsen]

Let me rephrase my question: how do I set (and maintain during a resize) a grid's height to the height of window? And if the grid grows higher than a window, the grid gets a scrollbar, not the window..

Thanks!

[Animal]

Put it into a Viewport who's layout is 'fit'

[dlbjr]

I am unable to scroll items in grid when setup this way. No scroll bar on the right side and the grid will not scroll with the mouse. I have 70 items and only the first 25 show on full screen. What can I do to get the grid to scroll. It scrolls fine when I manually set the height. The issue seems to be when using 'autoHeight'

Thanks,

[Animal]

What are you doing? How can we help?

[dlbjr]

Working Code:

var pGrid = new Ext.grid.GridPanel( {
id : 'Project_Grid',
loadMask : true,
title : 'Click on a record below to open the selected project',
store : ds_Search,
autoScroll : true,
width : 1000,
height : 550,
//autoHeight : true,
stripeRows : true,
clicksToEdit : 1,

If I comment out height : 550,
and turn on autoHeight : true,
then the scroll bar does not appear and the grid can not be scrolled.

The grid sits in a panel in the viewpart:

var panel = new Ext.Panel({
title:'Goodyear Lawton ' + strTitleSub + ' Project Manager',
autoHeight : true,
Width : 800,
border: true,
items: pGrid,
tbar: [btn_AddProject, ' ',' ',' ',' ',' ',' ',' ',' ',' ',' ', cb_SearchItems,
' ', cb_Assoc,
' ' , cb_Org,
' ', cb_Plant,
' ', cb_OpCenter,
' ', cb_ProcUnit,
' ', cb_Dept,
' ', cb_Equip,
' ', cb_SearchStatus,
' ',' ',' ',' ',' ',' ', txtSearchWords,
' ',' ',' ',' ',' ',' ', btn_Search,
' ',' ',' ',' ',' ',' ',' ',' ',' ', btn_Login,
' ',' ',' ',' ',' ',' ',' ',' ',' ', btn_Pager,
' ',' ',' ',' ',' ',' ',' ',' ',' ', btn_Report]
});


var viewport = new Ext.Viewport({
layout:'fit',
items:[{
anchor:'right 100%',
items :[panel]
}]
});


Could it be one of the settings I'm using in the Panel?
autoHeight : true,
Width : 800,
border: true,


Thanks,

[Animal]

How on earth did you get all that horrible styling in your post?

Why not just type in [ code] [ /code] tags, and paste your code in? I could have edited your post for you to make it readable, but it's just too bleh!

[Animal]

The Grid sits in a Panel in the Viewport?

Why in a Panel in the Viewport? WHy not just in the Viewport?