1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Answered: Horizontal scrollbar not showing when upgraded ExtJS to 4.2

    Answered: Horizontal scrollbar not showing when upgraded ExtJS to 4.2


    Hello,

    I have set up multiple grid panels that extend a base gridpanel. Each panel has a different number of columns to show different data sets.

    I had the grids configured to show a horizontal scrollbar when the width of the data in the grid exceeded the width of the panel itself. I believe this was occuring due to the fact that my config autoScroll was equal to true. This configuration worked fine using ExtJS 4.1.0

    When I upgraded to 4.2 due to a bug in 4.1.0 (http://www.sencha.com/forum/showthre...m-local-iframe. ), the horizontal scroll bars disappeared and the grid no longer has an elegant way for users to see all of the fields.

    I attempted to fix this by playing with different layouts of my grid, as well as using overflowX instead of autoScroll, as well as setting a specific width for the grid, however all my attempts still cannot produce a horizontal scroll bar.

    I know that a horizontal scroll is possible in 4.2 since the gridpanel example in the ExtJS docs can produce one, so there is definitely something up with how I'm configuring my grid, however my code produces a scrollbar in 4.1.0 but the exact same code fails to produce one in 4.2. Any help is appreciated.

    Here is my base grid panel and an example of a child panel

    Code:
    Ext.require(['CMPDataManagementTool.view.HorizontalSeparatorPanel',
                 'CMPDataManagementTool.view.VerticalSeparatorPanel']);
    
    /**
     * Base class for views used in the CMPDataManagementTool It contains all common configurations,
     * data, and functions that are used within all views.
     */
    Ext.define('CMPDataManagementTool.view.BaseDMTView' ,{
         extend: 'Ext.grid.Panel',
         alias : 'widget.baseDmtView',
         selType: 'cellmodel',
         autoScroll:'true',
         layout:'fit',
         maxHeight: 800,
        // width: 550, //messing around with widths to try to solve scrollbar problem
         
         initComponent: function() {
             currentView = this;
             
              this.callParent(arguments);
    
                this.addAndConfigureDockedItemsSpecifics();
                
                currentStore = currentView.getStore();
                currentProxy = currentStore.getProxy();
            },        
            
            plugins: [{
                ptype: 'cellediting',
                clicksToEdit: 1,
                pluginId:'cellEditingPlugin'
            }],
            dockedItems: [{
                xtype: 'panel',
                dmtId: 'basePanel',
                dock: 'top',
                ui: 'footer',
                layout: 'absolute',
                style: {
                    postition: 'relative'
                },
                items: [
                        
                    { xtype: 'horizontalSeparatorPanel', itemId: 'hrTag', width: '100%', y: 155},  
                    //Sends updates to Golden Source
                    { xtype: 'button', text: 'Submit Changes', width: 100, maxWidth: 100, y:180,
                        style: {
                            right:'20px'
                        },
                  
                        initComponent: function() {
                            submitButton = this;
                        },
                        listeners: {
                            'click': function() {
                                currentStore.on({
                                    scope: currentView,
                                    beforesync: currentView.submitStarted,
                                    write: currentView.submitFinished
                                });
                                currentProxy.on({
                                    scope: currentView,
                                    exception: currentView.showSubmitError
                                });
                                
                                currentView.getSelectionModel().deselectAll();
                                currentStore.sync();
                        }}},
                        
                    //Clears all data from grid
                    { xtype: 'button', text: 'Clear Results', width: 100, maxWidth: 100, y:180,
                        style: {
                            right:'135px'
                        },
     
                        initComponent: function() {
                            clearButton = this;
                        },
                        listeners: {
                        'click': function() {
                            currentView.disableButtons();
                            currentView.removeAllRecordsFromGrid();
                            currentView.enableButtons();
                        }
                    }},
                    
                    { xtype: 'panel', itemId: 'bufferSpace1', width: '100%', y: 202, height: 7, border: false}
                ]
            }],
            viewConfig: {
                getRowClass: function(record, rowIndex, rowParams, store) {
                    if(!record) {
                        return '';
                    }
                    var sentToGS = record.get('sentToGS')
                    
                    if(record.dirty == true) {
                        return 'bg-row-edited';
                    }
                    else if (sentToGS != null && sentToGS == true) {
                        return 'bg-row-sentToGS';
                    }
                },
                
                enableTextSelection: true
            },
    
        /**
         * Function to disable all buttons in panel
         */
        disableButtons: function(){
            submitButton.disable(true);
            clearButton.disable(true);
            this.disableSpecificButtons();
           },
           
        /**
         * Function to enable all buttons in panel
         */
           enableButtons: function(){
               submitButton.enable(true);
               clearButton.enable(true);
               this.enableSpecificButtons();
           },
           
           /**
            * Function encapsulating logic that will be executed prior to the store
            * associated with this view synching its data with the server
            */
           submitStarted: function() {
               Ext.Msg.show({
                   title:'Submitting',
                   msg: 'Changes are being submitted',
                wait:true,
                closable:false
               });
               
               var modifiedRecords = currentStore.getModifiedRecords();
               for (var i = 0; i < modifiedRecords.length; i++) {
                   var modifiedRecord = modifiedRecords[i];
                   modifiedRecord.set('sentToGS', true);
               }
           },
           
           /**
            * Function encapsulating the message that should be shown to users after
            * a submit button response comes back from server successfully
            */
           submitFinished: function() {
               var messageBox = Ext.Msg.show({
                   title:'DMT Response',
                   msg: 'Changes have been successfully sent',
                   animateTarget: submitButton,
                   icon: Ext.Msg.INFO,
                   closable: false
               });
    
               setTimeout(function(){
                   messageBox.close();
               }, 2700);
    
               currentView.enableButtons();
           },
           
         /**
            * Function encapsulating the message that should be shown to users after
            * a submit button response comes back from server with a failure :(
            */
           showSubmitError: function() {
               var errorMessageBox = Ext.Msg.show({
                   title:'DMT Response',
                   msg: 'An error has occured while sending changes. Please contact support or try again.',
                   animateTarget: submitButton,
                   icon: Ext.Msg.ERROR,
                   closable: false
               });
    
               setTimeout(function(){
                   errorMessageBox.close();
               }, 2700);
               
               currentView.enableButtons();
           },
           
           /**
            * Removes all current records that are in this grid as well as removing
            * the current selection that is specified (to avoid javascript errors) 
            */
           removeAllRecordsFromGrid: function () {
               var orgStatisticsStore = currentView.getStore();
            var orgStatisticsProxy = orgStatisticsStore.getProxy();
            
               orgStatisticsStore.removeAll(false);
            currentView.getSelectionModel().deselectAll();
           },
           
           /**
            * An "abstract" function that should be implemented by child classes of
            * BaseDMTView, which will add additional items to the dockedItems of
            * this class as well as configure already added items
            */
           addAndConfigureDockedItemsSpecifics: function () {
               throw "addAndConfigureDockedItemsSpecifics is unimplemented";
           },
           
           /**
            * An "abstract" function that should be implemented by child classes of
            * BaseDMTView, which will enable any buttons specific to that child class
            */
           enableSpecificButtons: function () {
               throw "enableSpecificButtons is unimplemented";
           },
           
        /**
            * An "abstract" function that should be implemented by child classes of
            * BasDMTView, which will enable any buttons specific to that child class
            */
           
           disableSpecificButtons: function () {
               throw "disableSpecificButtons is unimplemented";
           }, 
           
           /**
            * An "abstract" function that should be implemented by child classes of
            * BaseDMTView. The function will save content currently in the screen
            * that should be populated in the screen again when it is loaded
            * in the DMTPanel. The saved content will be placed in the passed
            * in map
            */
           saveCurrentScreenValues: function (map) {
               throw "saveCurrentScreenValues is unimplemented";
           },
           
        /**
            * An "abstract" function that should be implemented by child classes of
            * BaseDMTView. The function will load saved content into this view from the passed in map
            * that is associated with this view.
            */
           loadCurrentScreenValues: function (map) {
               throw "saveCurrentScreenValues is unimplemented";
           }
    });
    Heres a child grid example:

    Code:
    Ext.require(['Ext.window.MessageBox', 
                 'CMPDataManagementTool.view.people.PersonIdSearchForm']);
    
    Ext.define('CMPDataManagementTool.view.people.persongeounit.PersonGeoUnitView' ,{
        extend: 'CMPDataManagementTool.view.people.BasePersonDMTView',
        alias : 'widget.personGeoUnitView',
        id: 'personGeoUnitView',
        store: 'PersonGeoUnitStore',
        searchProcessorName: 'personGeoUnitSearch',
        searchIdKey: 'personGeoUnitSearchIdText',
        searchIdTypeKey: 'personGeoUnitComboValue', 
        multiSearchArrayKey: 'personGeoUnitMultiSearchIdText',
    
        initComponent: function() {
             Ext.apply(this, {
                 
                 columns: [{xtype: 'rownumberer', maxWidth: 22},
                           {header: 'ID', dataIndex: 'id', hidden: true, hideable: false},
                           {header: 'SSO_ID', dataIndex: 'ssoId',  width: 170, hideable: false},
                           {header: 'SEARCH_ID', dataIndex: 'searchId', width: 170, hideable: false},
                           {header: 'SEARCH_ID_TYPE', dataIndex: 'searchIdType', width: 170, hideable: false},
                           {header: 'ID_TYPE', dataIndex: 'idType', width: 170, hidden: true, hideable: false},
                           {header: 'GEO_UNIT_PURPOSE', dataIndex: 'geoUnitPurpose',  width: 170, hideable: false},
                           {header: 'GEO_UNIT_TYPE', dataIndex: 'geoUnitType', width: 170, hideable: false},
                           {header: 'GEO_UNIT_VALUE', dataIndex: 'geoUnitValue',  width: 170, editor: 'textfield', hideable: false},
                           {header: 'START_DATE', dataIndex: 'startDate', hidden: true, hideable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')},
                           {header: 'END_DATE', dataIndex: 'endDate',hidden: true, hideable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')},
                           {header: 'UPDATE_DATE', dataIndex: 'updateDate',  hidden: true, hideable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')},
                           {header: 'UPDATE_ID', dataIndex: 'updateId',  hidden: true, hideable: true},
                           {header: 'TAX_ID_TYPE', dataIndex: 'taxIdType', width: 145, editor: 'textfield', hideable: false},
                           {header: 'TAX_ID', dataIndex: 'taxId', width: 145, editor: 'textfield', hideable: false},
                           {header: 'DATA_SOURCE_ID', dataIndex: 'gsDataSourceId', width: 120, hideable: true},
                           {header: 'DELETE', dataIndex: 'deleteRow', xtype: 'checkcolumn', editor: 'checkbox', sortable: false, width: 50, maxWidth: 50, hideable: false},
                           {header: 'NEW_RECORD', dataIndex: 'newRecord', hidden: true, hideable: false},
                           {header: 'SENT_TO_GS', dataIndex: 'sentToGS', hidden: true, hideable: false}
                 ],
                 
                    defaults: {
                        flex: 2
                    }
             });
             
            this.callParent(arguments);
        },
    
        
            
        
    });
    Cheers,

    infernoz

  2. After a day of toying around with simple grids, I found that a horizontal scrollbar will NOT appear unless the heigh of the grid is explicitly set. If the height is not specified (even if its parent panel specifies a height), or if maxHeight is specified, the horizontal scrollbar will not show.

    I changed my base grid to have a height as follows

    Code:
    Ext.define('CMPDataManagementTool.view.BaseDMTView' ,{      extend: 'Ext.grid.Panel',      alias : 'widget.baseDmtView',      selType: 'cellmodel',      autoScroll:'true',      layout:'fit',      height: 800,
    .......
    
    This seemed to solve the issue however the horizontal scrollbar shows up much lower on the screen since the grid does not have an adjustable height.

    Also, the horizontal scrollbar does not show up until data is in the grid. If the grid is empty, the scrollbar isnt there, which is kind of awkward since users will not be able to see the names of all columns until data appears in the grid. See the screenshots below.
    Attachment 42846

    Attachment 42847

    Should I submit a bug report for this? This is definitely different behavior than 4.1.0. Not sure if it is intentional. I personally like the 4.1.0 behavior better.

    Cheers,

    infernoz

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Partially solved missing horizontal scrollbar

    Partially solved missing horizontal scrollbar


    After a day of toying around with simple grids, I found that a horizontal scrollbar will NOT appear unless the heigh of the grid is explicitly set. If the height is not specified (even if its parent panel specifies a height), or if maxHeight is specified, the horizontal scrollbar will not show.

    I changed my base grid to have a height as follows

    Code:
    Ext.define('CMPDataManagementTool.view.BaseDMTView' ,{      extend: 'Ext.grid.Panel',      alias : 'widget.baseDmtView',      selType: 'cellmodel',      autoScroll:'true',      layout:'fit',      height: 800,
    .......
    
    This seemed to solve the issue however the horizontal scrollbar shows up much lower on the screen since the grid does not have an adjustable height.

    Also, the horizontal scrollbar does not show up until data is in the grid. If the grid is empty, the scrollbar isnt there, which is kind of awkward since users will not be able to see the names of all columns until data appears in the grid. See the screenshots below.
    NoDataInGrid.jpg

    DataInGrid.jpg

    Should I submit a bug report for this? This is definitely different behavior than 4.1.0. Not sure if it is intentional. I personally like the 4.1.0 behavior better.

    Cheers,

    infernoz

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    0
    n1exceptme is on a distinguished road

      0  

    Default


    Hi,

    I'm having the same problem: the horizontal scrollbar does not show up until the grid is empty.
    Any further information on this behavior?

    Thanks

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar