MODx.tree.Tree

Last updated Apr 30th, 2019 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$0 per month—let's make that $500!

Learn more

MODx.tree.Tree¶

Extends: Ext.tree.TreePanel Key Features: Remotely-loaded toolbars; drag-and-drop to form fields functionality; connector functionality for removing and dragging/sorting.

Trees provide a quick and easy way to display multiple levels of objects which have a parent-child relationship, such as users or resources.

Unique Parameters¶

MODx.tree.Tree has a few extra parameters not found in Ext.tree.TreePanel objects:

Name	Description	Default
url	The URL to point the tree loader at. Optional if you pass in the data parameter.
rootName	The text of the root node, if rootVisible is set to true.
rootId	The ID of the root node.	root
data	Optional; if url is not set, data must be loaded in through here.	[]
remoteToolbar	If true, will load the tree's toolbar via data loaded remotely.	false
remoteToolbarUrl*	The connector URL to load the toolbar from. Defaults to the tree's URL.
remoteToolbarAction*	The processor action to load the toolbar from.	getToolbar
useDefaultToolbar	If remoteToolbar is false, this will load the default toolbar, which contains expand all, contract all, and refresh. Items passed to tbar property will be added after.	false
menuConfig	The config object to pass to the context menu loaded for this tree.
expandFirst	If true, will expand the first level nodes on render.	true
removeAction*	The processor action to take when removing a node.	remove
removeTitle*	The title for the remove dialog when removing a node.	Warning!
primaryKey	The primary key for the node. Usually is id.	id
sortAction	The processor action to take when sorting nodes via drag/drop.	sort
toolbarItemCls*	The CSS class to add to remoteToolbar loaded items.	x-btn-icon

= MODX Revolution 2.1+ Only

Custom Events¶

The custom events fired by MODx.tree.Tree are:

Name	Description
beforeSort	Fired before the tree sends off the sorted nodes to the sort processor. Passed the sorted nodes, encoded.
afterSort	Fired after the tree node sorting happens. Passes: - event - The drop event
- result - The response object from the sort processor.

Other Unique Features¶

Sorting¶

Sorting is automatically enabled by default in MODx.tree.Tree objects. To disable, set enableDD to false in your config. After a drag/drop, the tree will fire off the encoded nodes to a sort processor, with the same connector as the tree URL.

Toolbars can be loaded remotely, using the remoteToolbar config parameter. This will load the data from a processor loaded by the remoteToolbarAction config var, which defaults to "getToolbar".

Drag/Drop to MODx.FormPanel Fields¶

Nodes can be dragged into MODx.FormPanel fields, assuming that the following is passed into the config var:

,enableDD: true
,ddGroup: 'modx-treedrop-dd'

and that the node has an attribute of 'type', which is one of the following values: modResource,snippet,chunk,tv,file.