Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Grid height to fit window, on resizing?

  1. #1

    Default Grid height to fit window, on resizing?

    Dear list,

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

    Code:
    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!

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

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

  3. #3

    Default

    Thanks for the reply!

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

    I tried

    Code:
    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...

  4. #4

    Default

    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!

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

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

  6. #6
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281

    Default Unable to scroll items in grid when setup this way

    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,
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    [email protected]

    Owner of:
    Attractive Graphics - "custom screen printing"
    [email protected]

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    What are you doing? How can we help?

  8. #8
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281

    Default Sample of what I'm experiencing

    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,
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    [email protected]

    Owner of:
    Attractive Graphics - "custom screen printing"
    [email protected]

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    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!

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    The Grid sits in a Panel in the Viewport?

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

Page 1 of 3 123 LastLast

Posting Permissions

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