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
    Vote Rating
    2
      0  

    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
    Ext User
    Join Date
    Nov 2007
    Posts
    5
    Vote Rating
    0
      0  

    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
    Vote Rating
    2
      0  

    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,890
    Vote Rating
    90
      0  

    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,890
    Vote Rating
    90
      0  

    Default

    USE CODE TAGS

  6. #16
    Sencha User
    Join Date
    Jun 2008
    Posts
    44
    Vote Rating
    1
      0  

    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
    Sencha User
    Join Date
    Jun 2008
    Posts
    44
    Vote Rating
    1
      0  

    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
    Sencha User
    Join Date
    Jun 2008
    Posts
    44
    Vote Rating
    1
      0  

    Default

    Anyone, please?

  9. #19
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    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
    Sencha User
    Join Date
    Jun 2008
    Posts
    44
    Vote Rating
    1
      0  

    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
  •