PDA

View Full Version : Some weird accordion layout behavior (ext 3.0)



Chemist
27 Aug 2009, 11:55 PM
I have this configuration for my application main viewport, in ExtJs 2.3.0 it looks and feels great, everything works perfect



new Ext.Viewport({
id: 'main-viewport',
layout: 'border',
items: [{
region: 'north',
contentEl: 'north',
height: 0
}, {
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'Status',
margins: '0 0 0 0'
}, {
region: 'west',
contentEl: 'west',
title: 'Navigation',
split: true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: 'accordion',
iconCls: 'nav',
layoutConfig: {
animate: true
},
items: [{
layout: 'fit',
title: '???????????',
border: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-dictionaries'); } }],
items: [new Ext.tree.TreePanel({
id: 'tree-dictionaries',
layout: 'fit',
region: 'west',
margins:'0 0 5 5',
cmargins:'0 0 0 0',
split:true,
lines: false,
rootVisible: false,
autoScroll: true,
animCollapse:false,
animate: false,
collapseMode:'mini',
containerScroll: true,
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?tree=Reference',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-dictionaries');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Root',
id: 'RootFolder',
expanded: true
})
})]
},{
layout: 'fit',
title: '?????????',
border: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-documents'); } }],
items: [new Ext.tree.TreePanel({
id: 'tree-documents',
layout: 'fit',
region: 'west',
useArrows: true,
lines: false,
rootVisible: false,
autoScroll: true,
animate: true,
border: false,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?documents=true',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-documents');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Root',
id: 'RootFolder',
expanded: true
})
})]
},{
layout: 'fit',
title: '???',
border: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-arm'); } }],
items: [new Ext.tree.TreePanel({
id: 'tree-arm',
layout: 'fit',
region: 'west',
useArrows: true,
lines: false,
rootVisible: false,
autoScroll: true,
animate: true,
border: false,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?arm=true',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-arm');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Root',
id: 'RootFolder',
expanded: true
})
})]
}
]
},
{
region: 'east',
contentEl: 'east',
title: 'System settings',
collapsible: true,
collapsed: true,
split: true,
width: 225,
minSize: 175,
maxSize: 400,
layout: 'fit',
margins: '0 5 0 0',
iconCls: 'settings'
}, {
xtype : 'tabpanel',
region: 'center',
id: 'center-panel',
margins: '3 3 3 3',
tabWidth: 135,
enableTabScroll: true,
layoutOnTabChange : true,
activeTab: 0,
defaults:
{
autoScroll: true,
closable: true
}
}]
});


But, same code with ExtJS 3.0 makes this :
http://i021.radikal.ru/0908/e7/90e5ed093c4bt.jpg (http://radikal.ru/F/i021.radikal.ru/0908/e7/90e5ed093c4b.jpg.html)

and if all collapsed, looks like this:
http://s59.radikal.ru/i163/0908/37/40c8a42794d4t.jpg (http://radikal.ru/F/s59.radikal.ru/i163/0908/37/40c8a42794d4.jpg.html)

What am I doing wrong? Can anyone tell me?

Condor
28 Aug 2009, 12:03 AM
Are you using the ManagedIframe user extension? Did you also upgrade that?

Animal
28 Aug 2009, 5:48 AM
use



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

Animal
28 Aug 2009, 5:49 AM
But why are you embedding each operational Panel inside a layout: 'fit' wrapping Panel?

Unwrap them! Use them as immediate children of the accordion.

Chemist
30 Aug 2009, 11:09 PM
Thanks for replying... After cleaning up a little bit it looks like this :


new Ext.Viewport({
id: 'main-viewport',
layout: 'border',
items: [{
region: 'north',
contentEl: 'north',
height: 0
}, {
title: '?????????',
region: 'south',
contentEl: 'south',
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true
}, {
title: '?????????',
region: 'west',
contentEl: 'west',
width: 250,
minSize: 175,
maxSize: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig: {
animate : false
},
items: [
new Ext.tree.TreePanel({
title: '???????????',
id: 'tree-dictionaries',
rootVisible: false,
autoScroll: true,
lines: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-dictionaries'); } }],
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?tree=Reference',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-dictionaries');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
id: 'RootFolder',
text: 'Root'
})
}),

new Ext.tree.TreePanel({
title: '?????????',
id: 'tree-documents',
rootVisible: false,
autoScroll: true,
lines: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-documents'); } }],
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?documents=true',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-documents');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
id: 'RootFolder',
text: 'Root'
})
}),

new Ext.tree.TreePanel({
title: '???',
id: 'tree-arm',
rootVisible: false,
autoScroll: true,
lines: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-arm'); } }],
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?arm=true',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-arm');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
id: 'RootFolder',
text: 'Root'
})
}),

new Ext.tree.TreePanel({
title: '??????',
id: 'tree-reports',
rootVisible: false,
autoScroll: true,
lines: false,
tools: [{ id: 'refresh', handler: function() { PlatformTools.RefreshTree('tree-reports'); } }],
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
dataUrl: 'Service/MenuTrees.aspx?reports=true',
listeners: {
loadexception: function(tree, node, response){

PlatformTools.CheckMenuLogin(response, 'tree-reports');
}
}
}),
root: new Ext.tree.AsyncTreeNode({
id: 'RootFolder',
text: 'Root'
})
})]
},
{
region: 'east',
contentEl: 'east',
title: 'C???????? ?????????',
collapsible: true,
collapsed: true,
width: 225,
minSize: 175,
maxSize: 400
}, {
xtype : 'tabpanel',
region: 'center',
id: 'center-panel',
tabWidth: 135,
enableTabScroll: true,
layoutOnTabChange : true,
activeTab: 0,
plugins: new Ext.platform.TabCloseMenu(),
defaults: {
autoScroll: true,
closable: true
}
}]
})
but nothing really changed in behaviour...

Chemist
30 Aug 2009, 11:29 PM
Condor, I use ManagedIFrame only to show reports. And I've already updated that component.

Condor
30 Aug 2009, 11:40 PM
Condor, I use ManagedIFrame only to show reports. And I've already updated that component.

Are you sure you upgraded correctly?

The 'collapsed panel still takes up space' error is usually caused by using an older MIF version.

Chemist
30 Aug 2009, 11:48 PM
Thanks Condor, I've just got RC3 of the Mif and it helped! For now it all works perfect!

everything fixed.