Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Grid Panel resizes in Firefox, not in IE

    Grid Panel resizes in Firefox, not in IE


    Hello,

    I am using ExtJS 4.0.7, Firefox 12, and IE8.

    I have a grid panel, and a navigation pane inside another parent panel. My parent panel is set to a layout of border, my grid panel is set to a layout of 'fit' and my navigation pane is set to a layout of border. The navigation panel can be expanded, collapsed using the default navigation panel behavior.

    When collapsing and expanding my navigation pane in Firefox, the grid expands its width and contracts its width accordingly, and all columns can be seen in both states (the columns just take up morespace in the latter state)

    In IE, collapsing the navigation pane increases the width of my grid, but when expanding the navigation pane, the panel seems to keep the same size and the columns on the right hand side of the grid fall off the screen. A similar situation occurs when I decrease the size of the IE window. In Firefox, everything just shirnks in size, which is what I would expect to happen.

    Why does this occur in IE and not Firefox, and what can I do to get this to behave the way its behaving in Firefox in all browsers?

    //Main parent panel
    Code:
    Ext.require(['Ext.window.MessageBox', 
                 'DMT.view.OrgStatisticsSearchForm']);
    
    var currentComponent = undefined;
    var currentComponentArray = new Array();
    
    Ext.define('DMT.view.DMTPanel' ,{
        extend: 'Ext.panel.Panel',
        alias : 'widget.DMTPanel',
        requires: ['DMT.view.PersonGeoUnitView'],
        layout: 'border',
        title: 'CMP Data Management Tool',
        
        items: [
        {
            title: 'Navigation',
            layout: 'border',
            id: 'Navigation',
            region: 'west',
            split: true,
            collapsible: true,
            margins: '2 0 5 5',
            width: 175,
            maxWidth: 170,
            minWidth: 170,
            items: [{
                xtype: 'toolbar',
                 title: 'Navigation',
                 region: 'center',
                 vertical: true,
                 items: ['<b><u>grid a</u></b>',
                 {
                     id:   'stuf a',
                    text: '<b>stuff a</b>',
                    scale: 'medium',
                    listeners: { 
                        'click': function() {
                            var mainContentPanel = Ext.getCmp('MainContent');
                            
                            if (currentComponentArray.length != 0) {
                                var len=currentComponentArray.length;
                                for(var i=0; i<len; i++) {
                                    var component = currentComponentArray[i];
                                    mainContentPanel.remove(component, true);
                                }
                            }
                            
                            currentComponentArray = [];
                            
                            currentComponent = mainContentPanel.add(Ext.create('DMT.view.PersonGeoUnitView'));
                            currentComponentArray[0] = currentComponent;
                            
                            mainContentPanel.setTitle('Person Geo Unit Update');                    
                        }    
                    }
                },
                '-',
                '<b><u>grid b</u></b>',
                {
                     id:   'stuff b',
                    text: '<b>stuff b</b>',
                    scale: 'medium',
                    listeners: { 
                        'click': function() {
                            var mainContentPanel = Ext.getCmp('MainContent');
                        
                            if (currentComponentArray.length != 0) {
                                var len=currentComponentArray.length;
                                for(var i=0; i<len; i++) {
                                    var component = currentComponentArray[i];
                                    mainContentPanel.remove(component, true);
                                }
                            }
                            
                            currentComponentArray = [];
                            
                            currentComponent = mainContentPanel.add(Ext.create('DMT.view.OrgStatisticsView'));
                            currentComponentArray[0] = currentComponent;
                            
                            mainContentPanel.setTitle('Organization Statistics Update');
                         }    
                     }
                },
                '-',
                '<b><u>grid c</u></b>']
             }]
        },
        {
            id: 'MainContent',
            region: 'center',
            margins: '5 0 0 0'
        }
        ]
    });
    //Grid (I have many grids but they all behave the same so just showing one

    Code:
    Ext.require(['Ext.window.MessageBox', 
                 'DMT.view.OrgStatisticsSearchForm']);
    
    Ext.define('DMT.view.OrgStatisticsView' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.orgStatisticsView',
        id: 'orgStatisticsView',
        store: 'OrgStatisticsStore',
        selType: 'cellmodel',
        layout: 'fit',
        forceFit: true,
     
        /*, renderer: Ext.util.Format.dateRenderer('n/j/Y G:i:s')*/
        initComponent: function() {
            currentView = this;
            
            var orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
            var orgStatisticsProxy = orgStatisticsStore.getProxy();
            
             Ext.apply(this, {
                 plugins: [{
                        ptype: 'cellediting',
                        clicksToEdit: 1
                    }],
                    
                columns: [// a bunch of columns go here.
                ],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    ui: 'footer',
                    layout: {
                        type: 'fit',
                        pack: 'left'
                    },
                    items: [
                        { xtype: 'component', flex: 1, x:0, y:0 },
                        {xtype: 'orgStatisticsSearchForm', width: 900, length: 1000, x:0, y:10,
                            listeners: { 'afterrender': function() {
                                orgSearchForm = this;
                                searchButton = orgSearchForm.getComponent('orgStatsSearchButton');
                            }}},
                        { xtype: 'component', flex: 3, height: 2, x:0, y:0},
                        { xtype: 'button', text: 'Submit', width: 80, x:0, y:0,
                            initComponent: function() {
                                submitButton = this;
                            },
                            listeners: {
                                'click': function() {
                                    orgStatisticsStore.on({
                                        scope: currentView,
                                        beforesync: currentView.disableButtons,
                                        write: currentView.submitFinished
                                    });
                                    orgStatisticsProxy.on({
                                        scope: currentView,
                                        exception: currentView.showSubmitError
                                    });
                                    
                                    orgStatisticsStore.sync();
                            }}},
                        { xtype: 'button', text: 'Clear', width: 80,  x:10, y:0,
                            initComponent: function() {
                                clearButton = this;
                            },
                            listeners: {
                            'click': function() {
                                currentView.disableButtons();
                                orgStatisticsStore.removeAll(false);
                                currentView.enableButtons();
                            }
                        }}
                    ]
                }]
             });
             
            this.callParent(arguments);
        },
        
        disableButtons: function(){
            submitButton.disable(true);
            clearButton.disable(true);
            searchButton.disable(true);
           },
           
           enableButtons: function(){
               submitButton.enable(true);
               clearButton.enable(true);
               searchButton.enable(true);
           },
           
           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();
           },
           
           showSubmitError: function() {
               var errorMessageBox = Ext.Msg.show({
                   title:'DMT Response',
                   msg: 'An error has occured',
                   animateTarget: submitButton,
                   icon: Ext.Msg.ERROR,
                   closable: false
               });
    
               setTimeout(function(){
                   errorMessageBox.close();
               }, 2700);
               
               currentView.enableButtons();
           }
    });
    Cheers,

    infernoz

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please see of this problem exists in 4.1 GA. 4.07 suffers from many layout issues.
    http://www.sencha.com/products/extjs/

    Regards,
    Scott.

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

      0  

    Default estimated timeline to move from 4.0 to 4.1?

    estimated timeline to move from 4.0 to 4.1?


    How difficult is it to port to 4.1 from 4.0? I'm not sure if I have the bandwidth if it will take more than 1 day as this is not a project for leisure.

    Cheers,

    infernoz

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

      0  

    Default


    also, I see that 4.1 is in beta not a full fledged version. Slightly skeptical moving to a beta version for a production version of my application.

    infernoz

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    4.1 is final:
    http://www.sencha.com/blog/ext-js-4-1-final-released/

    The forums still have the RC3 tag

    The move to 4.1 can be seamless in some cases, in others there are hurdles. This depends on your setup.

    I recommend the move.

    Regards,
    Scott.

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

      0  

    Default


    I moved to use ExtJS 4.1 but am getting the following errors when starting my app up in firefox. I am more than willing to resolve any issue related to my application and 4.1 but I dont see anything in the upgrade guide regarding these issues so not sure exactly where to debug

    NetworkError: 404 Not Found - http://localhost:8080/extjs/src/dom/AbstractElement.js?_dc=1336066251166"

    NetworkError: 404 Not Found - http://localhost:8080/extjs/src/dom/AbstractHelper.js?_dc=1336066252033"

    Ext.deprecated is not a function

    T.onExtended is not a function

    IE has no issues coming up though there are viewable problems which I will try to address myself.

    Thanks,

    infernoz

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can use ext-all-dev and it will report all 'suggestions' in the console.

    Regards,
    Scott.

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

      0  

    Default Still a discrepancy in 4.1

    Still a discrepancy in 4.1


    Ok, upgraded to 4.1 (which is much faster in IE btw), but I still have the same inconsistent functionality, where the columns to the right fly off the screen after collapsing and expanding my navigation panel.

    I think the issue is the fact that I am using the forceFit: config. This forcefits all the columns correctly in Firefox after expanding the navigation panel, but in IE it doesnt. I'm under the opinion that the functionality in Firefox is correct but in IE is incorrect.

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Yes.. forceFit is not a good option. Use flex in your columns instead.

    Regards,
    Scott.

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

      0  

    Default


    Noted, will attempt to use flex (wasnt working well for me in the past but thats most likely my coding not ExtJS). But shouldnt the functionality of these configs work relatively identical in all browsers?

    Also, if forceFit isnt a good option, should it be deprecated? Seemed like a good option to me

    And just an update. I switched to using flex, commented out forceFit, but still same behavior in IE.

    Cheers,

    infernoz