Results 1 to 7 of 7

Thread: setHeight doesn't work in IE7

  1. #1

    Default setHeight doesn't work in IE7

    I am trying to use setHeight and setWidth to resize a grid when the user resizes their web browser. I've got them inside a handler for the onWindowResize event, and it works beautifully in Firefox. When I test it in IE7, the grid will only get taller. The setWidth works fine, but setHeight only seems to affect the height of the grid container when it is larger than it was previously.

    Can anyone offer any insight to this?

    Here is the grid definition:
    Code:
    var projectGrid = {
        init: function(){
            var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: 'projects.php?Action=GetListData'
                }),
                
                reader: new Ext.data.JsonReader({
                    root: 'projects',
                    totalProperty: 'totalProjects',
                    id: 'project_id'
                }, [
                        {name: 'project_name', mapping: 'name'},
                        {name: 'description', mapping: 'description'},
                        {name: 'company', mapping: 'company'},
                        {name: 'created_by', mapping: 'creator'},
                        {name: 'created_on', mapping: 'created', type: 'date', dateFormat:'timestamp'},
                        {name: 'project_status', mapping: 'status'}
                    ]),
                    
                    remoteSort: true
            });
            
            ds.setDefaultSort('project_name', 'asc');
            
            function renderProject(value, p, record){
                return String.format('<b>{0}</b><br />{1}', value, record.data['description']);
            }
            function renderProjectPlain(value){
                return String.format('<b><i>{0}</i></b>', value);
            }
            function renderCreated(value, p, record){
                return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), record.data['created_by']);
            }
            function renderCreatedPlain(value){
                return value.dateFormat('M j, Y, g:i a');
            }
            
            var cm = new Ext.grid.ColumnModel([{
                id: 'project_name',
                header: 'Project',
                dataIndex: 'project_name',
                width: 420,
                renderer: renderProject,
                css: 'white-space:normal;'
            },{
                header: 'Creator',
                dataIndex: 'created_by',
                width: 100,
                hidden: true
            },{
                header: 'Status',
                dataIndex: 'project_status',
                width: 100,
                align: 'center'
            },{
                id: 'project_created',
                header: 'Created',
                dataIndex: 'created_on',
                width: 150,
                renderer: renderCreated
            }]);
            
            cm.defaultSortable = true;
            
            var grid = new Ext.grid.Grid('project-grid', {
                ds: ds,
                cm: cm,
                selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
                enableColLock:false,
                loadMask:true
            });
            
            grid.render();
            
            grid.on('rowdblclick', rowDblClicked);
            
            var gridFoot = grid.getView().getFooterPanel(true);
            
            var paging = new Ext.PagingToolbar(gridFoot, ds, {
                pageSize: 25,
                displayInfo: true,
                displayMsg: 'Displaying projects {0} - {1} of {2}',
                emptyMsg: 'No projects to display'
            });
            
            paging.add('-', {
                pressed: true,
                enableToggle: true,
                text: 'Detailed View',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleDetails
            });
            
            ds.load({params:{start:0, limit:25}});
            
          var proj = Ext.get("project-grid-container");
          
          proj.setHeight(Ext.get("bdy").getHeight() - 110);
          proj.setWidth(Ext.get("bdy").getWidth());
           
          function toggleDetails(btn, pressed){
                cm.getColumnById('project_name').renderer = pressed ? renderProject : renderProjectPlain;
                cm.getColumnById('project_created').renderer = pressed ? renderCreated : renderCreatedPlain;
                grid.getView().refresh();
            }
            
            function rowDblClicked(grid, rowIdx, evt)
            {
                alert('opening item ' + rowIdx);
                var rowRecord = grid.getDataSource().getAt(rowIdx);
                
                alert('item id ' + rowRecord.id);
            }
        },
        
        resize : function(x, y){
          var p = Ext.get("project-grid-container");
          p.setSize(x,y-110);
        }
    }
    
    Ext.EventManager.onDocumentReady(projectGrid.init, projectGrid, true);
    Ext.EventManager.onWindowResize(projectGrid.resize, projectGrid, true);

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Is there any particular reason for not using GridPanel and autoSize method? I think they assist resizing a lot.

  3. #3

    Default

    No, no reason...other than I'm new to the framework and didn't know about them...I'll take a look and see where that gets me.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Ok, try GridPanel, maybe put it in layout and if troubles post a question.

  5. #5

    Default

    Beautiful...it works great! Next question.. can I have the ContentPanel tabs on the top of the panel, or do they have to be on the bottom?

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Refer to doc tabPosition.

  7. #7

    Default

    Thank you so much for your help...I think I'm off to the races. Cheers!!

Posting Permissions

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