vladsch
8 Dec 2009, 7:46 AM
Hi,
The following code demonstrates the size problem with toolbar inside accordion item
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2">
<title></title>
<!-- ExtJS library files -->
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
layout: "border",
items: [{
xtype: "panel",
region: "west",
collapseMode: "mini",
collapsible: true,
maxWidth: 400,
split: true,
width: 200,
layout: "accordion",
title: "Menu",
items: [{
xtype: "panel",
tbar: {
xtype: "toolbar",
items: [{
text : "toolbar button"
}]
},
title: "Menu"
},
{
xtype: "treepanel",
autoScroll: true,
tbar: {
xtype: "toolbar",
items: [{
text : "toolbar button"
}]
},
title: "Title",
useArrows: true,
root : new Ext.tree.TreeNode({text: 'Root'})
}]
},
{
xtype: "panel",
region: "center"
}]
});
});
</script>
</head>
<body>
</body>
</html>
1. Run the example. Notice that all fine (OriginalState.png (http://www.extjs.com/forum/attachment.php?attachmentid=17650&stc=1&d=1260287087))
2. Resize west region. Notice that toolbar has incorrect size (AfterWestRegionResize.png (http://www.extjs.com/forum/attachment.php?attachmentid=17651&stc=1&d=1260287094))
3. Under IE8. Click on second accordion panel. Notice that toolbar has incorrect size (big white hole) (UnderIE8.png (http://www.extjs.com/forum/attachment.php?attachmentid=17652&stc=1&d=1260287112))
4. Resize west region. (UnderIE8AfterResize.png (http://www.extjs.com/forum/attachment.php?attachmentid=17653&stc=1&d=1260287117))
Tested under ExtJS 3.1+
The following code demonstrates the size problem with toolbar inside accordion item
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2">
<title></title>
<!-- ExtJS library files -->
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
layout: "border",
items: [{
xtype: "panel",
region: "west",
collapseMode: "mini",
collapsible: true,
maxWidth: 400,
split: true,
width: 200,
layout: "accordion",
title: "Menu",
items: [{
xtype: "panel",
tbar: {
xtype: "toolbar",
items: [{
text : "toolbar button"
}]
},
title: "Menu"
},
{
xtype: "treepanel",
autoScroll: true,
tbar: {
xtype: "toolbar",
items: [{
text : "toolbar button"
}]
},
title: "Title",
useArrows: true,
root : new Ext.tree.TreeNode({text: 'Root'})
}]
},
{
xtype: "panel",
region: "center"
}]
});
});
</script>
</head>
<body>
</body>
</html>
1. Run the example. Notice that all fine (OriginalState.png (http://www.extjs.com/forum/attachment.php?attachmentid=17650&stc=1&d=1260287087))
2. Resize west region. Notice that toolbar has incorrect size (AfterWestRegionResize.png (http://www.extjs.com/forum/attachment.php?attachmentid=17651&stc=1&d=1260287094))
3. Under IE8. Click on second accordion panel. Notice that toolbar has incorrect size (big white hole) (UnderIE8.png (http://www.extjs.com/forum/attachment.php?attachmentid=17652&stc=1&d=1260287112))
4. Resize west region. (UnderIE8AfterResize.png (http://www.extjs.com/forum/attachment.php?attachmentid=17653&stc=1&d=1260287117))
Tested under ExtJS 3.1+