Scroll in TreePanel

[Madefh]

Hello.

I need put scrolling bar in 2 TreePanels. I found and tried some things, but none worked for me.

My code:


var ProfilePermission = Ext.extend(Ext.Window, {
id: 0,
toSave: [],
modal: true,
constrain: true,
maximizable: false,
resizable: false,
width: 600,
height: 500,
title: 'Permissions',
layout: 'fit',
closeAction: 'hide',
setid: function(id) {
this.id = id;
},
constructor: function() {
this.addEvents({salvar: true, excluir: true});
ProfilePermission.superclass.constructor.apply(this, arguments);
},
initComponent: function() {
var tree1 = new Ext.tree.TreePanel({
name: 'tree1',
id: 'tree1',
containerScroll: true,
autoWidth: true,
autoHeight: true,
border: false,
useArrows: true,
enableDD: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'profile_permission.php',
baseParams: {
act: 'getUnassigned',
profile: this.id,
}
}),
root: new Ext.tree.AsyncTreeNode({
nodeType: 'async',
text: 'Permissions 1',
iconCls: 'folder',
draggable: false,
id: '0'
})
});
var tree2 = new Ext.tree.TreePanel({
name: 'tree2',
id: 'tree2',
containerScroll: true,
autoWidth: true,
autoHeight: true,
border: false,
useArrows: true,
enableDD: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'profile_permission.php',
baseParams: {
act: 'getAssigned',
profile: this.id,
}
}),
root: new Ext.tree.AsyncTreeNode({
nodeType: 'async',
text: 'Permissions 2',
iconCls: 'folder',
draggable: false,
id: '0'
})
});
tree1.on('load', function() {
tree1.expandAll();
});
tree2.on('load', function() {
tree2.expandAll();
});
this.formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding: 5px;',
width: 600,
border: false,
autoHeight: true,
items: [{
layout: 'column',
autoHeight: true,
items: [{
columnWidth: .5,
autoHeight: true,
layout: 'form',
items: [tree1],
}, {
columnWidth: .5,
autoHeight: true,
layout: 'form',
items: [tree2],
}]
}]
});
Ext.apply(this, {
items: this.formPanel,
bbar: [
'->',
{text: 'Save', iconCls: 'icon-save', scope: this, handler: this._onBtnSalvarClick},
{text: 'Cancel', iconCls: 'silk-cross', scope: this, handler: this._onBtnCancelarClick}
]
});
ProfilePermission.superclass.initComponent.call(this);
},
show: function() {
this.formPanel.id = this.id;
var tree1 = this.formPanel.items.items[0].items.items[0].items.items[0];
var tree2 = this.formPanel.items.items[0].items.items[1].items.items[0];
tree1.loader.baseParams.profile = this.id;
tree2.loader.baseParams.profile = this.id;
tree1.root.reload();
tree2.root.reload();
ProfilePermission.superclass.show.apply(this, arguments);
},
onDestroy: function() {
ProfilePermission.superclass.onDestroy.apply(this, arguments);
this.formPanel = null;
},
_onFormLoad: function(form, request) {
this.el.unmask();
},
_onBtnSalvarClick: function() {
//
},
_onBtnDeleteClick: function() {
Ext.Msg.confirm('Confirm', 'You sure?', function(opt) {
if(opt === 'no') {
return;
}
this.el.mask('Deleting...');
Ext.Ajax.request({
url: 'profile_delete.php',
params: {
id: this.id
},
scope: this,
success: function() {
this.el.unmask();
this.hide();
this.fireEvent('excluir', this);
}
});
}, this);
},
_onBtnCancelarClick: function() {
this.hide();
}
});

I googled that autoHeight: true, but doesn't working.

Thanks.