1. #1
    Ext User nubee's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Vote Rating
    0
    nubee is on a distinguished road

      0  

    Question Gridpanel Scrollbars are not appearing properly in IE and FF

    Gridpanel Scrollbars are not appearing properly in IE and FF


    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!
    Attached Images

  2. #2
    Ext User
    Join Date
    Sep 2009
    Posts
    26
    Vote Rating
    0
    syedarshadali is on a distinguished road

      0  

    Default


    I am also facing the same problem in IE

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This is usually caused by a misconfigured layout.

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

  4. #4
    Ext User nubee's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Vote Rating
    0
    nubee is on a distinguished road

      0  

    Question My code:

    My code:


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

  5. #5
    Ext User nubee's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Vote Rating
    0
    nubee is on a distinguished road

      0  

    Question The code..

    The code..


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

  6. #6
    Ext User nubee's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Vote Rating
    0
    nubee is on a distinguished road

      0  

    Default


    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

Thread Participants: 2

Tags for this Thread