Grid Panel resizes in Firefox, not in IE

[scottmartin]

Can you create a small working grid example (with flex changes) with a screen so we can have a look.

Regards,
Scott.

[infernoz]

Sure, my current grid (and app) is relatively small at this point, I'll take a screenshot and paste the code again with the flex changes tomorrow as I'll need to black out some fields in the grid to post it in a public forum.

[infernoz]

Alright here are my screen shots from IE. Hopefully they are viewable. I erased the names of the columns and some other text, but you can see that there are 10 columns in the grid to begin with.

Prior to collapsing the navigation pane. All columns are visible
IE grid before Nav Pane collapse.jpg
After collapsing the pane, still all columns are visible

IE grid before Nav Pane expand.jpg

After expanding pane, the columns to not resize in IE to fit the screen, but rather the last column on the right gets cut off from the screen. Please take my word for it that this does NOT happen in Firefox, all columns resize and are visible. A similar thing happens when decreasing the size of the IE screen.

IE grid after Nav Pane expand.jpg

Heres my current code for the main panel holding the Navigation pane and grid, and the grid itself.

Ext.require(['Ext.window.MessageBox', 
             'DMT.view.SearchForm']);

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: '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>A</u></b>',
             {
                 id:   'AButton',
                text: '<b>A</b>',
                scale: 'medium',
                listeners: { 
                    'click': function() {
                        var mainContentPanel = Ext.getCmp('MainContent');
                        
                        /*if (currentComponent != undefined) {         
                            mainContentPanel.remove(currentComponent, true);             
                        }
                    
                        currentComponent = mainContentPanel.add(new DMT.view.AView());*/
                        
                        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 = new DMT.view.PersonGeoUnitView(); 
                        mainContentPanel.add(currentComponent);*/
                        currentComponent = mainContentPanel.add(Ext.create('DMT.view.PersonGeoUnitView'));
                        currentComponentArray[0] = currentComponent;
                        
                        mainContentPanel.setTitle('Person Geo Unit Update');                    
                    }    
                }
            },
            '-',
            '<b><u>B</u></b>',
            {
                 id:   'BButton',
                text: '<b>B</b>',
                scale: 'medium',
                listeners: { 
                    'click': function() {
                        var mainContentPanel = Ext.getCmp('MainContent');
                        
                    /*    if (currentComponent != undefined) {         
                            mainContentPanel.remove(currentComponent, true);             
                        }*/
                    
                        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.BView'));
                        currentComponentArray[0] = currentComponent;
                        
                        mainContentPanel.setTitle('Organization Statistics Update');
                     }    
                 }
            },
            '-',
            '<b><u>Silver</u></b>']
         }]
    },
    {
        id: 'MainContent',
        region: 'center',
        margins: '5 0 0 0'
    }
    ]
});

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',
 
    initComponent: function() {
        currentView = this;
        
        var orgStatisticsStore = Ext.data.StoreManager.lookup('BStore');
        var orgStatisticsProxy = orgStatisticsStore.getProxy();
        
         Ext.apply(this, {
             plugins: [{
                    ptype: 'cellediting',
                    clicksToEdit: 1
                }],
                
            columns: {
                items: [{header: 'ID', dataIndex: 'id', hidden: true, hideable: false},
                      {header: 'A', dataIndex: 'a',  hideable: false},
                      {header: 'B', dataIndex: 'b',  hideable: true},
                      {header: 'C, dataIndex: 'c', hideable: true},
                      {header: 'D', dataIndex: 'd',   hideable: true},
                      {header: 'E', dataIndex: 'e', hideable: true},
                      {header: 'F', dataIndex: 'f',  hideable: true},
                      {header: 'G', dataIndex: 'g', hideable: true},
                      {header: 'ID_TYPE', dataIndex: 'idtype', hidden: true, hideable: false},
                      {header: 'H', dataIndex: 'h', hidden: true, hideable: false},
                      {header: 'START_DATE', dataIndex: 'startDate', hidden: true, hideable: false},
                      {header: 'END_DATE', dataIndex: 'endDate', hidden: true, hideable: false},
                      {header: 'UPDATE_DATE', dataIndex: 'updateDate', hidden: true, hideable: false},
                      {header: 'UPDATE_ID', dataIndex: 'updateId', hidden: true, hideable: false},
                      {header: 'STAT_CODE', dataIndex: 'statCode', /*width: 170,*/ flex: 3, hideable: false},
                      {header: 'STAT_VALUE', dataIndex: 'statValue', /*width: 170,*/ flex: 3, editor: 'textfield', hideable: false},
                      {header: 'DELETE', dataIndex: 'deleteRow', xtype: 'checkcolumn',  flex: 1,  editor: 'checkbox', sortable: false, hideable: false}
            ],
                defaults: {
                    flex: 2
                }
            },
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                ui: 'footer',
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'middle'
                },
                items: [
                    {xtype: 'orgStatisticsSearchForm', width: 380, height: 70, x:0, y:10,
                        listeners: { 'afterrender': function() {
                            orgSearchForm = this;
                            searchButton = orgSearchForm.getComponent('orgStatsSearchButton');
                        }}},
                    { xtype: 'button', text: 'Submit', width: 80, maxWidth: 80,
                        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, maxWidth: 80, /* x:40, y:10,*/
                        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 from Golden Source',
               msg: 'Changes have been successfully sent to Golden Source',
               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 from Golden Source',
               msg: 'An error has occured while sending changes Golden Source. Please contact support or try again.',
               animateTarget: submitButton,
               icon: Ext.Msg.ERROR,
               closable: false
           });

           setTimeout(function(){
               errorMessageBox.close();
           }, 2700);
           
           currentView.enableButtons();
       }
});

[scottmartin]

I will take a look.

btw, there is a missing quote in your columns.header .. does this make a difference?

{header: 'B', dataIndex: 'b',  hideable: true},
{header: 'C, dataIndex: 'c', hideable: true},
{header: 'D', dataIndex: 'd',   hideable: true},

I am surprised this one made it past.

Scott.

[infernoz]

I changed the names of the headers to mask their actual names, so that was a typo strictly on the paste into this forum. The quote exists in my actual code.

Thanks,

infernoz

[infernoz]

Hello,

Just wondering if this discrepancy between how grid panels are resized in Firefox and IE was looked at? As mentioned, this occurs in my version 4.1.0, not just 4.0. The behavior in Firefox is preferred (please read above in thread).

Cheers,

infernoz

[scottmartin]

Please provide a small working test case (not your application) so we can us it to review your problem.

Scott.