PDA

View Full Version : How can I have a floating treepanel width size to the content?



legistrate
13 Nov 2013, 4:00 PM
I am working on a drop down tree-style navigation menu for my application and I'm having some trouble determining the best layout/sizing to use for a Ext.menu.Menu container and a Ext.tree.Panel child component. The basic idea is similar to a Ext.ux.TreePicker except I don't want to have a selector for an input, but rather use the href config on tree nodes to navigate away from the current page.

My goal is to have a drop down button menu that has a width determined by the dynamically desired content width (changes on node expand and collapse). With the code below I am able to have the treepanel content determine the height but the width fills the screen.


Ext.define('MyApp.toolbar.NavigationToolbar',
{
// Class Properties
extend:'Ext.toolbar.Toolbar',
requires:
['MyApp.model.Page'],

items:
[{
text:'Root',
menu:
{
xtype:'menu',
layout:'auto',
plain:true,
items:
[{
xtype:'treepanel',
header:false,
border:false,
//maxWidth:450,
maxHeight:450,
shrinkWrapDock:2,
store:
{
autoLoad:true,
model:'MyApp.model.Page',
root:
{
text:'Root',
id:'/my/path/',
href:'/my/path/',
expanded:true,
allowDrag:false,
allowDrop:false
}
}
}]
}
}],
// User Defined Methods
toString:function()
{
return('['+Ext.getClassName(this)+']');
}
});

I would think that changing the treepanel config to have shrinkWrapDock set to 3 or true and setting a maxWidth would resolve this in the same way that it does for the height. Instead, the width is always fixed to the maxWidth that I specify. How can I have a floating treepanel width size to the content?

I am using ext-4.2.2.1144 in Firefox (needs to work in IE9 as well)