PDA

View Full Version : Tree scroller



bkraut
5 Aug 2009, 3:22 AM
Hi,

I tried everithing what I found, I checked the examples but no luck.
Simple I get no scrollers when expanding the tree:

Here is the code:



this.moduleMenuTree = new Ext.tree.TreePanel({
border: false,
rootVisible: true,
animate: true,
title: 'Module menu',
collapseFirst: false,
autoScroll: true,
containerScroll: true,
layout: 'fit',
loader: new Ext.tree.TreeLoader({
dataUrl: 'Controller/Meta/ModelTreeLoader',
clearOnLoad: true,
listeners: {
beforeload: function(treeLoader, node) {
treeLoader.baseParams.id = node.attributes.id;
treeLoader.baseParams.root = node.attributes.root;
treeLoader.baseParams.nodeType = node.attributes.attributes[0].nodeType;
treeLoader.baseParams.nodeId = node.attributes.attributes[0].nodeId;
},

loadexception: function(object, node, response ) {
Ext.MessageBox.alert("Error", "Napaka pri nalaganju");
},

scope: this
}
}),
root: new Ext.tree.AsyncTreeNode({
text : 'Menu',
iconCls : 'model',
attributes : [{
nodeType: 'Model'
}],
draggable : false,
root : true,
expanded : true
})
});


Any help appreciated.

Animal
5 Aug 2009, 3:44 AM
What's the layout of the TreePanel's container?

Obviously, for the TreePanel's autoScroll to work, it needs to be sized.

bkraut
5 Aug 2009, 4:09 AM
Here is the whole class:



Ext.namespace("Ext.ux");

Ext.ux.ModuleFormWindow = Ext.extend(Ext.Window, {

// ***********************************************************************************
// ***********************************************************************************
// Init component
// ***********************************************************************************
// ***********************************************************************************

initComponent: function() {

this.moduleMenuTree = new Ext.tree.TreePanel({
border: false,
rootVisible: true,
animate: true,
title: 'Module menu',
collapseFirst: false,
autoScroll: true,
containerScroll: true,
layout: 'fit',
loader: new Ext.tree.TreeLoader({
dataUrl: 'Controller/Meta/ModelTreeLoader',
clearOnLoad: true,
listeners: {
beforeload: function(treeLoader, node) {
treeLoader.baseParams.id = node.attributes.id;
treeLoader.baseParams.root = node.attributes.root;
treeLoader.baseParams.nodeType = node.attributes.attributes[0].nodeType;
treeLoader.baseParams.nodeId = node.attributes.attributes[0].nodeId;
},

loadexception: function(object, node, response ) {
Ext.MessageBox.alert("Error", "Napaka pri nalaganju");
},

scope: this
}
}),
root: new Ext.tree.AsyncTreeNode({
text : 'Menu',
iconCls : 'model',
attributes : [{
nodeType: 'Model'
}],
draggable : false,
root : true,
expanded : true
})
});

this.form = new Ext.ux.ExtendedFormPanel({
url: 'Controller/Module/SaveModule',
items: [
{
xtype : "fieldset",
title : "Module information",
autoHeight: true,
items: [{
xtype:'hidden',
name: 'id'
}, new Ext.form.TextField({
fieldLabel: 'GUID',
name: 'guid',
width: 300
}).disable(),{
xtype:'textfield',
fieldLabel: 'NameSymbol',
name: 'nameSymbol',
width: 300
},{
xtype:'textfield',
fieldLabel: 'NameSpace',
name: 'nameSpace',
width: 300
},{
xtype:'textfield',
fieldLabel: 'Name',
name: 'name',
width: 420
},{
xtype:'textarea',
fieldLabel: 'Description',
name: 'description',
width: 420
},{
xtype:'checkbox',
fieldLabel: 'Active',
name: 'active'
}]
},{
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Menu',
height: 250,
items: [
this.moduleMenuTree
],
listeners: {
activate: function() {
alert('Activating 1');
}
}
},{
title: 'Extensions',
html: 'List of installed extensions',
listeners: {
activate: function() {
alert('Activating 2');
}
}
}]
}
],
listeners: {
cancel: function() {
this.close();
},
submit: function() {
var form = this.getForm();
if (!form.getForm().isValid()) {
App.setAlert(false, "Form is invalid");
return false;
} else {
form.getForm().submit({
waitMsg:'Saving ...',
success: function(response,recordData) {
this.close();
}.createDelegate(this),
failure : function(action, responseData) {
Ext.MessageBox.alert ("Error", Ext.decode(responseData.response.responseText).message);
},
scope: this.form
});
}
},
scope: this
}
});

Ext.apply(this, {
title: 'Module Form',
width:800,
height:600,
iconCls: 'x-icon-modules',
shim:false,
animCollapse: true,
constrainHeader:true,
layout:'fit',
items: [
this.form
]
});

Ext.ux.ModuleFormWindow.superclass.initComponent.apply(this, arguments);
},

// ***********************************************************************************
// ***********************************************************************************
// On render
// ***********************************************************************************
// ***********************************************************************************

onRender: function() {
Ext.ux.ModuleFormWindow.superclass.onRender.apply(this, arguments);
},

getForm: function() {
return this.form;
}
});


// ***********************************************************************************
// ***********************************************************************************
// Registering xtype
// ***********************************************************************************
// ***********************************************************************************

Ext.reg('ModuleFormWindow', Ext.ux.ModuleFormWindow);

Animal
5 Aug 2009, 4:16 AM
Why is the TreePanel in a TabPanel?

But you should get scrollbars if the tree's content exceeds the height.

Poke the DOM with firebug and see what's what.

bkraut
5 Aug 2009, 4:26 AM
Hi Animal,

I found out how to get the scrollers.
I changed the lines, but unfortunatelly I don't have a header any more.



{
xtype: 'tabpanel',
activeTab: 0,
items: [
this.moduleMenuTree
,{
title: 'Extensions',
html: 'List of installed extensions',
listeners: {
activate: function() {
alert('Activating 2');
}
}
}]
}


Anyway, I also think the scroller should emerge. I noticed this for allmost an year ago.
Thanks for your time.

Animal
5 Aug 2009, 5:37 AM
Dno't have a header? Where? Why? what header?

bkraut
5 Aug 2009, 6:44 AM
If you set a title on tab item this text is displayed in the tab. If you put a Panel inside the tab and set title, you get a header of that panel displayed in the tab.

Animal
5 Aug 2009, 6:46 AM
Yes. So did you remove a header config from your TreePanel??