View Full Version : [3.0.0]A Panel on a Viewport disappears on resize. why?

16 Sep 2009, 10:41 PM
hi guys
i have this problem

i create a viewport with two region, west and center
on the right side there is a panel, and everything is ok
on the left side there is another panel, containing a treepanel on the north and a combopanel with a combobox on the south.

if i resize the browser page, the combopanel disappears.
i would like a fixed height for the combopanel, and a fitting style of the height of the treepanel.

-i tried to put no height style in the dirtree, but combopanel disappears on resizing
-i tried to put autoHeight: true, but in this way the treepanel collapse, and there is no fitting

i tried other attempts, but no way.

any solutions?

thank you very much


// main panel of all the page
var mainTreePanel = new Ext.Viewport({
id: 'viewport',
layout: 'border',
items: [
// Directory
new Ext.Panel({
id: 'dir-panel',
region: 'west',
layout: 'fit',
split: true,
collapseMode: 'mini',
frame: false,
autoScroll: false,
width: 300,
autoHeight: true,
border: false,
title: i18n.msg('TabDirectory'),
items: [dirTree, comboPanel]
// galery
new Ext.Panel({
id: 'cat-panel',
region: 'center',
autoScroll: true,
minSize: 0,
frame: false,
border: false,
title: i18n.msg('PanelTitleCategory'),
items: thumbPanel

//right panel
thumbPanel = new Ext.Panel({
id: 'images-gallery',
frame: false,
border: false,
tbar: [
new Ext.Button({text: i18n.msg('IconAttachInFile'), handler: selectClick, iconCls: 'attach'})
items: thumbView

//left north panel
var dirTree = new Ext.tree.TreePanel({
id: 'tree-dir-panel',
iconCls: 'nav',
header: false,
autoScroll: true,
animate: true,
enableDD: false,
containerScroll: true,
border: false,
loader: new Ext.tree.TreeLoader({
id: 'dir-tree-loader',
dataUrl: '/manager/spaw2/ajax/newImage.php',
listeners: {
beforeload: function(treeLoader, node) {
this.baseParams = {
action: 'get_children',
idn: node.attributes.idn,
dir: 1
root: new Ext.tree.AsyncTreeNode({
text: i18n.msg('TreeRepository'),
expanded: true,
draggable: false,
idn: 'async-root'//,


//left south panel
var comboPanel = new Ext.Panel({
id: 'combo-panel',
height: 200,
html: 'Preview:',
items: cbPreview

var cbPreview = new Ext.form.ComboBox({
id: 'preview-combobox',
mode: 'remote',
editable: false,
triggerAction: 'all',
lazyRender: false,
displayField: 'TPR_Descrizione',
valueField: 'TPR_Descrizione',
store: new Ext.data.JsonStore({
url: '/manager/spaw2/ajax/newImage.php',
fields: ['TPR_Descrizione', 'TPR_ID'],
root: 'results',
autoLoad: true,
baseParams: {
action: 'get_preview'
fieldLabel: 'Preview'

16 Sep 2009, 11:21 PM
READ the API docs on the layout you have used to contain the TWO items dirTree and comboPanel