GridPanel inside accordion layout forceFit problem IE6

**mabello** · 28 Mar 2008 7:03 AM

Hi there,

I'm trying to put inside a Panel with layout set to 'accordion' a GridPanel with forceFit=true;

From the documentations of the GridPanel, I understand that you have to specify the width of the GridPanel or it will be calculated depending on Ext.Layout of the Panel which contains the grid.

While in FF everything works fine, I have some problem with IE6, and the width of the columns is not right, and the first column is taking all the space while the others are not showed.

This is the code (using the grid of Ext examples):

HTML Code:

<html>
<head>    
    <title>Search Box Test</title>
    <link rel="stylesheet" type="text/css" href="../resources2.0.2/css/ext-all.css" />


    
    <script type="text/javascript" src="../scripts/Ext2.0.2/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/Ext2.0.2/ext-all-debug.js"></script>
   <style type="text/css">
    .ext-ie .x-form-item label.x-form-item-label{position:absolute;}
    .ext-ie .x-form-label-top .x-form-item label.x-form-item-label{position:static;}
   </style>



</head>
<body>
    <div id="grid-example"></div>
</body>
</html>
<script  type="text/javascript">


var flag = true;

var createGrid = function(){
    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];
	
	function renderTopic(value, p, record){
        return String.format(
                '<b><a href="#" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);


    // create the Grid
    var grid = new Ext.grid.GridPanel({
		region: 'center',
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', hidden: false},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', hidden: false},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change', hidden: false},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', hidden: false},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', hidden: true}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:450,
        title:'Array Grid',
		viewConfig: {
            forceFit:true/*,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p style="color:red;">Write here write here Write here write here Write here write here Write here write here Write here write here </p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }*/
        }
    });
	return grid;
}
  

Ext.onReady(function() {

    var fitPanel1 = {
        title: 'Title1',
        layout: 'fit',
        items: [createGrid()]
    }
    var fitPanel2 = {
        title: 'Title2',
        layout: 'fit',
        items: [createGrid()]
    }
    /*
    var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [fitPanel1, fitPanel2]
    });
    */
     var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [createGrid(), createGrid()]
    });

    new Ext.Viewport({
		layout:'fit',
		items:[accoridonPanel]
	});
})

</script>

I'm trying this:

PHP Code:


Ext.onReady(function() {

    var fitPanel1 = {
        title: 'Title1',
        layout: 'fit',
        items: [createGrid()]
    }
    var fitPanel2 = {
        title: 'Title2',
        layout: 'fit',
        items: [createGrid()]
    }
    /*
    var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [fitPanel1, fitPanel2]
    });
    */
     var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [createGrid(), createGrid()]
    });

    new Ext.Viewport({
        layout:'fit',
        items:[accoridonPanel]
    });
})

Is it a bug or I'm missing out something? (I hope I'm missing out some configurations or I'm doing wrong!)
Thanks a lot

**Condor** · 28 Mar 2008 7:08 AM

Try adding:

Code:

<style type="text/css">
  .x-grid3-header-offset {width: auto;}
</style>

**mabello** · 28 Mar 2008 7:20 AM

Thanks Condor for your quick reply, I really appreciate that.

With your suggestion in IE6 apparently works when I load the page but now I have 2 different issues if I resize the browser:

1)If I resize the windows browser (or if I have a split panel I guess and I resize it), reducing the width, the grid does not resize so I can't see the columns anymore (FF ok)

2)If I resize the windows browser (or if I have a split panel I guess and I resize it), reducing the height, I can't see the scrollbars so I can't scroll in order to see all the rows of my grid. In order to reproduce this, you need to maximize the window of the browser, and then change the height (FF ok)

**mabello** · 28 Mar 2008 8:35 AM

I think it could be a BUG in IE6.
Now my problem is that while I can play in Firefox with Firebug and the css, I can not do the same in IE6; I've installed in IE6 the plugin that is the IE developer toolbar, but I can't edit the css! Anyone know other tools?

**Animal** · 28 Mar 2008 8:38 AM

Of course that should be

Code:

    new Ext.Viewport({
        layout:'accordion',
        items:[createGrid(), createOtherGrid()]
    });
})

Where each grid is a different GridPanel. You can't add one Component in at two places.

**Condor** · 28 Mar 2008 8:48 AM

Originally Posted by Animal

You can't add one Component in at two places.

If you look at the code you will see that createGrid will create a new component, so it won't add the same component twice.

Coming back to the accordion layout with grids: Can't seem to fix that with a simple workaround...

**mabello** · 28 Mar 2008 9:51 AM

createGrid is a factory method ideed.

Thanks Animal and thanks Condor for the help, I really appreciate that.

I will try to look at the problem, but if you two guys can't figure out how to fix it, I will be in trouble

Thanks again

**Animal** · 28 Mar 2008 11:04 AM

One thing to try is "over-nesting".

Try putting each GridPanel inside a layout:'fit' Panel, and add that Panel to the accordion. It may be that the manipulations that the AccordionLayout layout manager class does somehow breaks the GridPanel, but I've seen GridPanels in layout:'fit' parents often.

**mabello** · 28 Mar 2008 11:16 AM

Thanks Animal,
I've already tried, if you look at my previuos code (and you are right, I've used this type of idea somewhere else and in some case it fixes the problem):

PHP Code:


Ext.onReady(function() {

    var fitPanel1 = {
        title: 'Title1',
        layout: 'fit',
        items: [createGrid()]
    }
    var fitPanel2 = {
        title: 'Title2',
        layout: 'fit',
        items: [createGrid()]
    }
    /*
    var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [fitPanel1, fitPanel2]
    });
    */
     var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [createGrid(), createGrid()]
    });

    new Ext.Viewport({
        layout:'fit',
        items:[accoridonPanel]
    });
})

you can uncomment this

PHP Code:


 /*
    var accoridonPanel = new Ext.Panel({
        layout: 'accordion',
        items: [fitPanel1, fitPanel2]
    });
    */

But with the accordion no luck so far, unlucky!!

**Condor** · 29 Mar 2008 12:49 AM

Try:

Code:

layout: 'accordion',
layoutConfig: {
	autoWidth: false
},

GridPanel inside accordion layout forceFit problem IE6

Thread Tools

Search Thread

Display

GridPanel inside accordion layout forceFit problem IE6

GridPanel inside accordion layout forceFit problem IE6

Some other problems

Some other problems

Moving the thread in BUG

Moving the thread in BUG

Thanks guys

Thanks guys