Gridpanel Scrollbars are not appearing properly in IE and FF

[nubee]

Hi everyone!
I have been facing this problem for a while - The bottom arrow of the scrollbars in gridpanels gets cut off/hidden in the grid panel disallowing the user to scroll down to the very bottom of the grid.
I found a temporary (also, time consuming) fix here but the problem with that fix is that the problem keeps on coming back. I am looking for a permanent fix so that user is able to atleast see the last item in the grid.

Attached picture should give you a better idea of my problem.

Thanks so much!

[syedarshadali]

I am also facing the same problem in IE

[Condor]

This is usually caused by a misconfigured layout.

Can you post the layout code for your grid and it's container?

[nubee]

var PageGrid = Ext.extend(Ext.grid.GridPanel, {
    
    /*
     *  The values of these config options can (and in this case, should) be overridden by passing a config object in when instantiating this
     */
    addButtonHandler: function(){ alert("add"); },
    deleteButtonHandler: function() { alert("delete"); },    
    
    initComponent: function(){
        var that = this;
        var mapping = Ext.data.Record.create([
            {name: 'number'},
            {name: 'pageType'},
            {name: 'linkText', mapping: 'linkTextAuditorium'},
            {name: 'state', mapping: 'stateDesc'}
        ]);
        
        var jsonReader = new Ext.data.JsonReader({
            id: "number"
        }, mapping);
        
        var store = new Ext.data.Store({
            proxy: new Ext.ux.data.DWRProxy({
                dwrFunction: WebcastService.getPages,
                listeners: {
                    'beforeload': function(dataProxy, params){
                        // setting the args that will get passed to the DWR function
                        var workingRevLevel = webcastListView.currentlyEditingLevel;
                        var loadArgs = [params.currentWebcastNumber, workingRevLevel];
                        params[dataProxy.loadArgsKey] = loadArgs;
                    }
                }
            }),
            reader: jsonReader
        });
        
        var selModel = new Ext.grid.RowSelectionModel({
            singleSelect: true
        });
        
        Ext.apply(this, {
            /*
             *  These config options can *not* be overridden by a passed-in config object
             */
            title: 'Pages',
            store: store,
            selModel: selModel,
            columns: [{
                header: "Page Type",
                width: 160,
                sortable: true,
                dataIndex: 'pageType',
                renderer: function(value, metadata, record, rowIndex, colIndex, store) {
                    // bugzilla 500
                    if (value == "INDEX") {
                        return "Event Landing";
                    } else if (value == "PREP") {
                        return "Prepared Remarks";
                    } else if (value == "PFC") {
                        return "Chart PDF";
                    } else if (value == "PRESS") {
                        return "Press Release";
                    } else if (value == "QA") {
                        return "Q and A";
                    } else if (value == "CAPTION") {
                        return "Live Caption";
                    } else if (value == "SURVEY") {
                        return "Survey";
                    } else if (value == "CUSTOM") {
                        return "Custom";
                    // bug929
                    // } else if (value == "CUSTOM_NONAV") {
                    //    return "Custom - No Nav";                                                
                    } else {
                        return value;
                    }
                }                
            }, {
                id: "pageGridLinkText",
                header: "Auditorium Link Text",
                width: 100,
                sortable: true,
                dataIndex: 'linkText'
            }, {
                header: "State",
                width: 85,
                sortable: true,
                dataIndex: 'state',
                renderer: function(value, metadata, record, rowIndex, colIndex, store) {
                    // bugzilla 500
                    var type = record.data.pageType;
                    if (type == "QA" || type == "SURVEY" || type == "CAPTION" || type == "CUSTOM") {
                        return "";
                    } else {
                        return value;
                    }
                }                    
            }],
            stripeRows: true,
            autoExpandColumn: 'pageGridLinkText',
            style: "margin-top:10px; margin-left:10px",
            cls: "grid-footer-buttons-left-padding",
            height: 140,
            width: 500,
            buttonAlign: 'left',
            minButtonWidth: 60,
            buttons: [{
                text: "(+) Add",
                handler: this.addButtonHandler
            }, {
                text: "(–) Delete",
                handler: this.deleteButtonHandler,
                id: "pages_deleteButton",
                disabled: true
            }]
        });
        
        var refreshButtons = function() {
            var firstSelected = that.getSelectionModel().getSelections()[0];            
            if (firstSelected) { // if a row is selected                
                Ext.getCmp("pages_deleteButton").enable();
            } else {
                Ext.getCmp("pages_deleteButton").disable();                
            }
        };         
        selModel.on("selectionchange", refreshButtons, that );
        
        PageGrid.superclass.initComponent.apply(this, arguments);
        
    }    
});

Please let me know if this alone can solve this case?

Thanks in advance!

[nubee]

var AuditoriumGrid = Ext.extend(Ext.grid.GridPanel, {
    /*
     *  The values of these config options can (and in this case, should) be overridden by passing a config object in when instantiating this
     */
    addButtonHandler: function(){ alert("add"); },
    deleteButtonHandler: function() { alert("delete"); },
    
    initComponent: function(){
        var that = this;
        var mapping = Ext.data.Record.create([
            {name: 'number'},
            {name: 'subTitle'},
            {name: 'type'},
            {name: 'chartState',  mapping: 'chartStateDesc'}
        ]);
        
        var jsonReader = new Ext.data.JsonReader({
            id: "number"
        }, mapping);
        
        var store = new Ext.data.Store({
            proxy: new Ext.ux.data.DWRProxy({
                dwrFunction: WebcastService.getAuditoriums,
                listeners: {
                    'beforeload': function(dataProxy, params){
                        // setting the args that will get passed to the DWR function
                        var selectedWebcastNumber = params.currentWebcastNumber;
                        var workingRevLevel = webcastListView.currentlyEditingLevel;
                        var loadArgs = [selectedWebcastNumber, workingRevLevel];
                        params[dataProxy.loadArgsKey] = loadArgs; 
                    }
                }
            }),
            reader: jsonReader
        });
        
        var selModel = new Ext.grid.RowSelectionModel({
            singleSelect: true
        });
        
        Ext.apply(this, {
            /*
             *  These config options can *not* be overridden by a passed-in config object
             */
            title: 'Auditoriums',
            store: store,
            selModel: selModel,
            columns: [{
                id: "audGridSubTitle",
                header: "Sub-Title",
                width: 160,
                sortable: true,
                dataIndex: 'subTitle'
            }, {
                header: "Type",
                width: 75,
                sortable: true,
                dataIndex: 'type'
            }, {
                header: "Chart State",
                width: 85,
                sortable: true,
                dataIndex: 'chartState'
            }],
            stripeRows: true,
            autoExpandColumn: 'audGridSubTitle',
            style: "margin-top:10px; margin-left:10px;",
            cls: "grid-footer-buttons-left-padding",
            height: 140,
            width: 500,
            buttonAlign: 'left',
            minButtonWidth: 60,
            buttons: [{
                text: "(+) Add",
                handler: this.addButtonHandler
            }, {
                text: "(–) Delete",
                handler: this.deleteButtonHandler,
                id: "auditoriums_deleteButton",
                disabled: true
            }]
        });
        
        var refreshButtons = function() {
            var firstSelected = that.getSelectionModel().getSelections()[0];            
            if (firstSelected) { // if a row is selected                                
                Ext.getCmp("auditoriums_deleteButton").enable();
            } else {
                Ext.getCmp("auditoriums_deleteButton").disable();                
            }
        };         
        selModel.on("selectionchange", refreshButtons, that );    
        
        AuditoriumGrid.superclass.initComponent.apply(this, arguments);    
    }
});

My earlier post with the code did not seem to work.. I hope one works..

[nubee]

var AuditoriumGrid = Ext.extend(Ext.grid.GridPanel, {
/*
* The values of these config options can (and in this case, should) be overridden by passing a config object in when instantiating this
*/
addButtonHandler: function(){ alert("add"); },
deleteButtonHandler: function() { alert("delete"); },

initComponent: function(){
var that = this;
var mapping = Ext.data.Record.create([
{name: 'number'},
{name: 'subTitle'},
{name: 'type'},
{name: 'chartState', mapping: 'chartStateDesc'}
]);

var jsonReader = new Ext.data.JsonReader({
id: "number"
}, mapping);

var store = new Ext.data.Store({
proxy: new Ext.ux.data.DWRProxy({
dwrFunction: WebcastService.getAuditoriums,
listeners: {
'beforeload': function(dataProxy, params){
// setting the args that will get passed to the DWR function
var selectedWebcastNumber = params.currentWebcastNumber;
var workingRevLevel = webcastListView.currentlyEditingLevel;
var loadArgs = [selectedWebcastNumber, workingRevLevel];
params[dataProxy.loadArgsKey] = loadArgs;
}
}
}),
reader: jsonReader
});

var selModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});

Ext.apply(this, {
/*
* These config options can *not* be overridden by a passed-in config object
*/
title: 'Auditoriums',
store: store,
selModel: selModel,
columns: [{
id: "audGridSubTitle",
header: "Sub-Title",
width: 160,
sortable: true,
dataIndex: 'subTitle'
}, {
header: "Type",
width: 75,
sortable: true,
dataIndex: 'type'
}, {
header: "Chart State",
width: 85,
sortable: true,
dataIndex: 'chartState'
}],
stripeRows: true,
autoExpandColumn: 'audGridSubTitle',
style: "margin-top:10px; margin-left:10px;",
cls: "grid-footer-buttons-left-padding",
height: 140,
width: 500,
buttonAlign: 'left',
minButtonWidth: 60,
buttons: [{
text: "(+) Add",
handler: this.addButtonHandler
}, {
text: "(–) Delete",
handler: this.deleteButtonHandler,
id: "auditoriums_deleteButton",
disabled: true
}]
});

var refreshButtons = function() {
var firstSelected = that.getSelectionModel().getSelections()[0];
if (firstSelected) { // if a row is selected
Ext.getCmp("auditoriums_deleteButton").enable();
} else {
Ext.getCmp("auditoriums_deleteButton").disable();
}
};
selModel.on("selectionchange", refreshButtons, that );

AuditoriumGrid.superclass.initComponent.apply(this, arguments);
}
});



My earlier 2 replies didn't get posted. strange. I hope this one does :S