PDA

View Full Version : [UNKNOWN][2.x,3.x] BUG GridPanel inside accordion layout forceFit problem IE6



mabello
1 Apr 2008, 6:57 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, in IE6 there is a BUG

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


<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>

</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:


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]
});
})

Further informations here:
http://extjs.com/forum/showthread.php?t=30742

Thanks a lot

brian.moeskau
1 Apr 2008, 9:59 AM
Try this:


Ext.onReady(function() {
new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(),createGrid()]
});
});


BTW, please post in Help first next time for questions like this. EDIT: I see that you did do that, my bad! However, I also see that Condor provided the same answer in that thread that I just did, meaning you didn't really need to post it as a bug.

mabello
1 Apr 2008, 10:11 AM
It is A BUG!!
EDIT:
It doesn't work, as you can see from the last post Condor left...try to resize your browser windows, click on the header of the panel, resize the browser please, you will see
that the headers of the collpased panels are messed up...also FF has the same problems of IE...

mabello
1 Apr 2008, 10:28 AM
I post a screenshot to be more clear.
I'm using also your workaround you posted in the help


Ext.onReady(function() {
var vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(),createGrid()]
});

if(Ext.isIE6){
Ext.EventManager.onWindowResize(function(){
vp.doLayout();
});
}
});


Same problem (FF and IE6)

brian.moeskau
1 Apr 2008, 11:23 AM
In your screenshot you have a JS error. Does it still not work if you fix your error?

brian.moeskau
1 Apr 2008, 11:31 AM
Oh, I see that you're using FF, so obviously, if you read my code, you'd see that the sizing check is only for IE (auto width should work fine in FF by default). I suspect that your code being broken is your main problem, but if you do need to monitor resize in FF too, then you should try this:


Ext.onReady(function() {
var vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(),createGrid()]
});

Ext.EventManager.onWindowResize(function(){
vp.doLayout();
});
});


BTW, just telling me it's a BUG (in all caps of course) does not necessarily make it so.

mabello
1 Apr 2008, 12:26 PM
I apologize for my capital letters of bug, I "overeacted" :) only because you've closed the bug without reading my post, sorry again about that.

Now, speaking about the problem, I've read your code of course, and it does not work (I had have tried the right version of your code for Firefox of course and the problem was the same and the error you see in my previous screenshot belongs to a different page).

So as I was saying, I had have already tried this:



Ext.onReady(function() {
var vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(),createGrid()]
});

Ext.EventManager.onWindowResize(function(){
vp.doLayout();
});
});


Resizing the browser, you can verify what I'm saying, both in Firefox 2.0.0.12 and IE6, I think you could give it a try if you do not believe me.

I'd like only to have a confirm please that it is a bug, so we could try to fix it, I'll be really happy to help!Besides, I don't think it has to be difficult...and believe me, I hope it is not a bug but is my stupid fault.

Keep up the great works with Ext, you and the other guys have made an amazing work!!!
Sorry againg for bug in capital letters.

Regards,
Marco

PS: I would suggest to say people to create a folder Test inside the exemple folder of Ext and put their test code inside that folder, so that you guys could only copy and past the code inside the folder to try that, it could help in my opinion if everyone will follow this standard of test.

brian.moeskau
1 Apr 2008, 1:31 PM
I tested your code originally before I replied, and I tested the code I sent you. I tested the following in IE6 and FF 1.5 on Windows, and FF 2.0 and Safari 3 on Mac and it seems to work correctly in every browser:


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 vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(),createGrid()]
});

if(Ext.isIE6){
Ext.EventManager.onWindowResize(function(){
vp.doLayout();
});
}
});


If you run this code as I have it does it still not work?

mabello
1 Apr 2008, 1:41 PM
No, it does not work.

Please try this:



Ext.onReady(function() {
var p1 = {
title:"AAA"
};
var p2 = {
title:"BBB"
}
var vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[p1, p2]
});

Ext.EventManager.onWindowResize(function(){
vp.doLayout();
});
});

Instructions to verify the bug
1)Load tha page
2)Reduce the width of the browse
3)Click on the header of panel "BBB" to expand it
4)Increase the width of the browser
bug)Header of the panel AAA is messed up.

If you add more panels, you will see that all of them will be messed up..

Now, I think I know where the problem is.

Since AccordionLayout extends FitLayout the onLayout executed is actually this one:


onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
}
},


this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize()); is called only for the activeItem, that is the panel "BBB", while for the panel "AAA" which is not active, is not called this.setItemSize and because of that it has not been resized properly.

That's my idea, I'm going to fix it and to post the workround.

Please, can you confirm that you can now verify the problem?

Thanks for your help

EDIT:

Of course if In FF you do not use the layoutConfig autoWidth: false, it works simply fine because as you said auto width should work fine in FF by default.

mabello
1 Apr 2008, 3:07 PM
Now, my fix code is not brilliant, I'm half dead today, but it seems to work, I need to do something better, but only to show you what the problem is, I'm sure you can come out with something better:


/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

/**
* @class Ext.layout.Accordion
* @extends Ext.layout.FitLayout
* <p>This is a layout that contains multiple panels in an expandable accordion style such that only one
* panel can be open at any given time. Each panel has built-in support for expanding and collapsing.
* This class is intended to be extended or created via the layout:'accordion' {@link Ext.Container#layout}
* config, and should generally not need to be created directly via the new keyword.</p>
* <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
* the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.
* Example usage:</p>
* <pre><code>
var accordion = new Ext.Panel({
title: 'Accordion Layout',
layout:'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},{
title: 'Panel 2',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},{
title: 'Panel 3',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
}]
});
</code></pre>
*/
Ext.layout.Accordion = Ext.extend(Ext.layout.FitLayout, {
disabledItems: [],
/**
* @cfg {Boolean} fill
* True to adjust the active item's height to fill the available space in the container, false to use the
* item's current height, or auto height if not explicitly set (defaults to true).
*/
fill : true,

/**
* @cfg {Boolean} autoWidth
* True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
*/
autoWidth : true,
/**
* @cfg {Boolean} titleCollapse
* True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
* expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false,
* {@link #hideCollapseTool} should be false also.
*/
titleCollapse : true,
/**
* @cfg {Boolean} hideCollapseTool
* True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
* When set to true, {@link #titleCollapse} should be true also.
*/
hideCollapseTool : false,
/**
* @cfg {Boolean} collapseFirst
* True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
* in the contained panels' title bars, false to render it last (defaults to false).
*/
collapseFirst : false,
/**
* @cfg {Boolean} animate
* True to slide the contained panels open and closed during expand/collapse using animation, false to open and
* close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
* contained panel for this property, set this to undefined at the layout level.
*/
animate : false,
/**
* @cfg {Boolean} sequence
* <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
*/
sequence : false,
/**
* @cfg {Boolean} activeOnTop
* True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
* false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
*/
activeOnTop : false,

// private
onLayout : function(ct, target){
Ext.layout.Accordion.superclass.onLayout.call(this, ct, target);
for(var i = 0; i < this.disabledItems.length; i++) {
var item = this.disabledItems[i];
item.setSize(target.getStyleSize());
}
},

renderItem : function(c){
if(this.animate === false){
c.animCollapse = false;
}
c.collapsible = true;
if(this.autoWidth){
c.autoWidth = true;
}
if(this.titleCollapse){
c.titleCollapse = true;
}
if(this.hideCollapseTool){
c.hideCollapseTool = true;
}
if(this.collapseFirst !== undefined){
c.collapseFirst = this.collapseFirst;
}
if(!this.activeItem && !c.collapsed){
this.activeItem = c;
}else if(this.activeItem){
c.collapsed = true;
}
Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
c.header.addClass('x-accordion-hd');
c.on('beforeexpand', this.beforeExpand, this);
},

// private
beforeExpand : function(p, anim){
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.disabledItems.indexOf(ai) == -1)
this.disabledItems.push(ai);
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.disabledItems.indexOf(this.activeItem) != -1)
this.disabledItems.remove(this.activeItem);
this.layout();
},

// private
setItemSize : function(item, size){
if(this.fill && item){
var items = this.container.items.items;
var hh = 0;
for(var i = 0, len = items.length; i < len; i++){
var p = items[i];
if(p != item){
hh += (p.getSize().height - p.bwrap.getHeight());
}
}
size.height -= hh;
item.setSize(size);
}
}
});

Ext.Container.LAYOUTS['accordion'] = Ext.layout.Accordion;




So, I actually modifiued this:


disabledItems: [],//ADDED

// private
onLayout : function(ct, target){//ADDED
Ext.layout.Accordion.superclass.onLayout.call(this, ct, target);
for(var i = 0; i < this.disabledItems.length; i++) {
var item = this.disabledItems[i];
item.setSize(target.getStyleSize());
//console.log(this.disabledItems.length);
}
},
// private
beforeExpand : function(p, anim){//MODFIED
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.disabledItems.indexOf(ai) == -1)//*****
this.disabledItems.push(ai);//*****
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.disabledItems.indexOf(this.activeItem) != -1)//*****
this.disabledItems.remove(this.activeItem);//*****
this.layout();
},



I do not have tested a lot, but it seems to work.
Probably instead of item.setSize(target.getStyleSize()); you could do something different for better performance...but as I said, it's more to verify that if you use autoWidth: false, you need to do something similar to fix the problem.

Now I'm doing this


Ext.onReady(function() {
var p1 = {
title:"1"
};
var p2 = {
title:"2"
}
var p3 = {
title:"3"
}
var p4 = {
title:"4"
}
var p5 = {
title:"5"
}
var vp = new Ext.Viewport({
layout:'accordion',
layoutConfig: {
autoWidth: false
},
items:[createGrid(), p2, createGrid(), p4, p5]
});
});


Let me know please

mabello
2 Apr 2008, 12:58 AM
Hi there,
so in my application I have defined an accordionpatch which is defined as follow:



Ext.layout.AccordionPatch = Ext.extend(Ext.layout.Accordion, {

inactiveItems: [],//ADDED

// private
onLayout : function(ct, target){//ADDED
Ext.layout.AccordionPatch.superclass.onLayout.call(this, ct, target);
if(this.autoWidth === false) {
for(var i = 0; i < this.inactiveItems.length; i++) {
var item = this.inactiveItems[i];
item.setSize(target.getStyleSize());
}
}
},
// private
beforeExpand : function(p, anim){//MODFIED
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.autoWidth === false && this.inactiveItems.indexOf(ai) == -1)//*****
this.inactiveItems.push(ai);//*****
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.autoWidth === false && this.inactiveItems.indexOf(this.activeItem) != -1)//*****
this.inactiveItems.remove(this.activeItem);//*****
this.layout();
}

});

Ext.Container.LAYOUTS['accordionpatch'] = Ext.layout.AccordionPatch;


One problem I can see is that I do not know how to clear inactiveItems array because there is no destroy event of course for the layout.

It fixes the problem when layoutConfigs.autoWidth is set to false, so I hope this will help if someone will have my same problem using IE6.

Thanks again for your help and please let me know if something is wrong or if it is possible to fix the problem in another way.

Regards,
Marco

brian.moeskau
2 Apr 2008, 1:11 AM
I was able to confirm the behavior once you provided the steps to test. I haven't had a chance to look into it further yet though. I'll let you know.

costa_basil
9 Apr 2008, 7:50 AM
Is there any other resolution on this?

mabello
9 Apr 2008, 8:12 AM
For now, use my patch. It works for me...
Regards

costa_basil
9 Apr 2008, 5:55 PM
I am trying to integrate your patch in gwt-ext, but when I run it in hosted mode it fails saying the array doesn't support indexOf at this line:

if(this.autoWidth === false && this.inactiveItems.indexOf(ai) == -1)//*****

I created a sample and it runs fine in IE6. I am confused at this point...Is IE6 supporting or not indexOf or is ExtJs patching the Array class?

costa_basil
9 Apr 2008, 6:11 PM
Just an update, yes, I think ExtJs patches Array indexOf and remove.

And dude, thank you and God bless you, the patch works now even in gwt-ext!

Condor
8 Oct 2009, 6:08 AM
This is still a problem in Ext 3.x.

See this post (http://www.extjs.com/forum/showthread.php?t=82201).

Condor
9 Oct 2009, 2:30 AM
I propose to explicitly size all items in an accordion layout that is set to autoWidth:false and introduce a scrollOffset property to reserve room for a possible scrollbar.


Ext.override(Ext.layout.AccordionLayout, {
autoWidth : false, // or true?
setItemSize : function(item, size){
var applyWidth = !this.autoWidth,
applyHeight = this.fill,
scrollOffset = this.fill ? 0 : Ext.num(this.scrollOffset, Ext.getScrollBarWidth()),
width = applyWidth ? size.width - scrollOffset : undefined,
height = applyWidth ? size.height : undefined;
if(applyWidth || applyHeight){
this.container.items.each(function(p){
if(p != item){
if(applyWidth){
p.setWidth(width);
}
if(applyHeight){
height -= p.header.getHeight();
}
}
});
if(item){
item.setSize(width, height);
}
}
}
});

Now the only question is:
Should the default autoWidth of AccordionLayout be true or false?

Animal
9 Oct 2009, 3:41 AM
I've suggested before that it be false.

But surely we can do without a permanent scrollOffset gap?

onResize can see if there is vertical overflow at the full width, and add/remove space for the scrollbar accordingly.

I do this in a "pseudo accordion" Container in which I use anchor: '100%', collapsible: true Panels so that I can have many open at once.

The Container listens for collapse and expand of its children and makes space for a scrollbar is necessary.

Condor
9 Oct 2009, 3:45 AM
The Container listens for collapse and expand of its children and makes space for a scrollbar is necessary.

Now you are assuming that only expand and collapse can change the panel height (not true for autoHeight panels).

There isn't an event that triggers when a scrollbar appears or disappears, so you can never build this correctly.

That is why I left the support for autoWidth:true in, so anybody that wants auto-sizing panels can still make it work (although nested fitting layouts won't work).

Is this really a big problem? How many users are actually using fit:false accordions with large panels?

Chemist
28 Oct 2009, 3:06 AM
It's been nearly 2 years, but this bug is still in ExtJs... Will anything about this change sometime?

Rob_mac
20 Nov 2009, 7:38 AM
Just to say that I've also encountered this problem in IE8. However, the override for AccordionLayout proposed by Condor seems to work nicely so thanks for that.
:)