Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: Grid height to fit window, on resizing?

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

    Default

    The toolbar will not show in the viewport and the grid is always empty. works using a panel in the view port. I have made it a habit of using the panel I guess.

    Working Code:

    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:

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

  2. #12

    Default

    Why not try to add a
    Code:
    autoScroll:true
    to your gridPanel ?
    Edit : ach.. you allready tried...

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

    Default I have

    I have used "autoscroll : true" on the grid. No difference.

    The viewport code below does not show the grid.

    Code:
    var viewport = new Ext.Viewport({
    layout:'fit',
    items:[{
    region: 'north',
    height: 100,
    items :[panel] 
    },{
    region: 'center',
    autoHeight: true,
    items :[pGrid] 
    }]
    });
    
    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]

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

    Default

    AutoScroll is meaningless on a GridPanel.

    The above code won't work for you.

    layout: 'fit', and two items???? Which one do you think will get shown?

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

    Default

    USE CODE TAGS

  6. #16

    Default

    Quote Originally Posted by Animal View Post
    Put it into a Viewport who's layout is 'fit'
    I tried in the second example, at the very bottom...

    And there's one more thing I don't quite get: the docs day I can put just one item intom "fit" lyaout but I have two (the grid and the form). So I need to put both into some container but then the container gets the scrollbar, no?

  7. #17

    Default

    Hello,
    thanks for all the replies! The good part is, the grid works great now:
    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 gridpanel = new Ext.grid.GridPanel({
            stripeRows: true,
            width: 300,
            store: store,
            colModel: model,
            autoExpandColumn: 'title',
            frame: true,
    //        renderTo: body
        });
        
        var fieldset = new Ext.form.FieldSet({
            width: 300,
            autoHeight: true,
            border: false,
            defaultType: 'textfield',
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            items: [{
                fieldLabel: 'Title',
                name: 'title'
            },{
                fieldLabel: 'Number',
                name: 'number'
            }],
    //        renderTo: body
        });
        
        var formpanel = new Ext.form.FormPanel({
            frame: true,
            items: fieldset,
    //        renderTo: body
        });
        
        var panel = new Ext.Panel({
            layout: 'column',
            items: [formpanel, gridpanel],
    //        renderTo: body
        });
        
        var viewport = new Ext.Viewport({
            layout: 'fit',
    //        items: panel,
            items: gridpanel,
            renderTo: body
        });
        
    });
    The problem is though, when I try to put both the grid and the form together inside, it breaks. In "viewport", please, instead of:

    Code:
    //        items: panel,
            items: gridpanel,
    try:

    Code:
            items: panel,
    //        items: gridpanel,
    What is that white gap? And why did the grid lost its scrollbar? Even more importantly, how to get the grid's scrollbar back?

    Thanks for any help!

  8. #18

    Default

    Anyone, please?

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

    Default

    If you want >1 item, you need another layout. Think about it. It's what layouts are for.

    Perhaps you want layout: 'border" with the two items having region: 'north', height: 200, and the other one having region: 'center'

    It's really up to you to use the layout you want. And 'fit' fits ONE child item to the exact size of the Container.

  10. #20

    Default

    Sorry for the late reply.

    Layout: 'border" works just great, thanks a lot!

Page 2 of 3 FirstFirst 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
  •