tree.Tree Class
This class is deprecated.
Tree widget
Item Index
Methods
- addChild
- addChildren
- addRecord
- dispose
- disposeAllChildren
- expandAll
- expandSome
- getAllChildren
- getBody()
- getCanvas
- getChild
- getChildren
- getClassChildren
- getEl()
- getForm *
- getHeight
- getParent
- getSocket
- getTitle
- getTplFields
- getWidth
- hasChildren
- hide
- hideAfterDelay
- insertJSON
- isCollapsible
- isHidden
- isVisible
- load
- ludoConfig
- ludoDOM
- ludoEvents
- ludoRendered
- resize
- setHtml
- setNewCssForDomNodes
- setTitle
- show
- showChild
Properties
Attributes
Methods
addChild
-
child. -
insertAt -
pos
Add a child component. The method will returned the created component.
Parameters:
Returns:
addChildren
-
children
Add child components Only param is an array of child objects. A Child object can be a component or a JSON object describing the component.
Parameters:
-
childrenArray
Returns:
dispose
-
view
Dispose LudoJS components
Parameters:
-
viewCore
disposeAllChildren
()
Remove all children
Returns:
expandAll
-
parentRecord
expand entire tree or branch from parentRecord
Parameters:
-
parentRecordObject(optional)
expandSome
-
parentRecord -
depth
Expand a record
getAllChildren
()
Return array of all child components, including grand children
Returns:
getBody()
()
Object
Return reference to the "body" DOM element. A component consists of one container and inside it a DOM "body" element
Returns:
getCanvas
()
canvas.Canvas
Returns drawable Canvas/SVG
Returns:
Example:
var win = new ludo.Window({ id:'myWindow', left:50, top:50, width:410, height:490, title:'Canvas', css:{ 'background-color':'#FFF' } }); // Creating style sheet var paint = new ludo.canvas.Paint({ css:{ 'fill':'#FFFFFF', 'stroke':'#DEF', 'stroke-width':'5' } }); var canvas = win.getCanvas(); canvas.adopt(new ludo.canvas.Node('line', { x1:100, y1:100, x2:200, y2:200, "class":paint }));
getChildren
()
Return Array reference to direct direct child components.
Returns:
getClassChildren
()
Array | Children
Return child views of this class. By default it returns the children property of the class. There may be advantages of defining children in this method. By defining children in the children property of the class, you don't have access to "this". By returning children from getClassChildren, you will be able to use "this" as a reference to the class instance.
Returns:
getEl()
()
Object
Return reference to components DOM container. A component consists of one container and inside it a DOM "body" element
Returns:
getForm *
()
form.Manager
Returns form.Manager for this view. The form manager gives you access to form methods like save, deleteRecord, reset etc
Returns:
Example:
view.getForm().reset();
to reset all form fields
view.getForm().save();
to submit the form
view.getForm().read(1);
to send a read request to the server for record with id 1.
getTitle
()
Returns title of Component.
Returns:
getTplFields
-
record
Return record fields/columns for the node template, example ['title','description'] from {title} {description}
Parameters:
-
recordObject
Returns:
getWidth
()
Number
Returns total width of component including padding, borders and margins
Returns:
hide
()
Hide this component
Returns:
insertJSON
-
data
Insert JSON into components body Body of Component will be updated with compiled JSON from ludo.tpl.Parser. This method will be called automatically when you're using a JSON data-source
Parameters:
-
dataObject
Returns:
load
()
Load content from the server. This method will send an Ajax request to the server using the properties specified in the remote object or data-source
Returns:
ludoDOM
()
The second life cycle method This method is typically used when you want to create your own DOM elements.
Example:
ludoDOM : function() {
this.parent(); // Always call parent ludoDOM
var myEl = new Element('div');
myEl.set('html', 'My Content');
this.getEl().adopt(myEl);
}
ludoEvents
()
The third life cycle method This is the place where you add custom events
Returns:
Example:
ludoEvents:function(){ this.parent(); this.addEvent('load', this.myMethodOnLoad.bind(this)); }
ludoRendered
()
The final life cycle method. When this method is executed, the componenent (including child components) are fully rendered.
resize
-
config
Resize Component and it's children. Example:
Parameters:
-
configObject
Example:
component.resize( { width: 200, height:200 } );
setNewCssForDomNodes
-
record
Update CSS of branch after moving or removing a record from the tree(Drag and Drop)
Parameters:
-
recordObject
Properties
array unReneredChildren
Unknown
Array of unrendered children
boolean isRendered
Unknown
Property set to true when component and it's children are rendered.
layout
Object | String
Layout config object
Default: undefined
Example:
layout:{ type:'linear', orientation:'horizontal' } or shortcut :
layout:"cols" which is the same as linear horizontal
Layout types: linear, fill, grid, tab, popup
object modificationManager
Unknown
Object of class ludo.tree.Modifications. Store modified, updated and removed records
string cssSignature
Unknown
private
CSS class added to container of this component
Default: undefined
tpl
String
Template for JSON compiler.
Curly braces {} are used to specify keys in the JSON object. The compiler will replace {key} with JSON.key
The compiled string will be inserted as html of the body element.
The template will be compiled automatically when you're loading JSON remotely. If JSON is an array of object, the template will be applied to each object, example:
JSON : [ { firstname : 'Jane', lastname : 'Doe' }, { firstname : 'John', lastname: 'Doe' }]
tpl : '<div>{lastname}, {firstname}</div>
will produce this result:
<div>Doe, Jane</div><div>Doe, John</div>
Default: '' (empty string)
Example:
tpl:'Firstname: {firstname}, lastname:{lastname}'
Attributes
autoExpand
Boolean
Auto expand tree to selected node when calling selectRecord method
Default: true
Fires event autoExpandChange
Fires when the value for the configuration attribute autoExpand is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
autoScrollNode
Boolean
Auto scroll node into view when calling the selectRecord method
Default: true
Fires event autoScrollNodeChange
Fires when the value for the configuration attribute autoScrollNode is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
categoryConfig
Object
Config of tree node categories
Example:
categoryConfig:{
"database":{
"selectable" : false
}
}
categoryKey
String
Key used to defined nodes inside categories. This key is used for default values and node config
Default: "type"
children
Array
Array of Config objects for dynamically created children
Example:
new ludo.Window({ left : 200, top : 200, width : 400, height: 400, children : [{ type : 'View', html : 'This is my sub component' }] });
containerCss
Object
CSS styles of component container example: { padding : '2px', margin: '2px' }
Default: undefined
copyEvents
Object
Create copies of events, example: This will fire a "send" event for every "click" event.
Default: undefined
Example:
copyEvents:{ 'click' : 'send' }
css
Object
CSS styles of body element of component example: { padding : '2px', margin: '2px' }
Default: undefined
data
Array
Initial records, example [ {id:1, title: 'Document', type: 'document' , children: [{ id:2, title: 'Chapter 1', type: 'chapter'},{ id:3, title: 'Chapter 2', type: 'chapter'}] } In most cases, you will want to pull this from the server. Response from server should be { success: true, data : [ { tree nodes structure above } ]}
Fires event dataChange
Fires when the value for the configuration attribute data is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
defaults
Object
Default values when not present in node.
Default: undefined
Example:
defaults:{
"database" : {
"icon" : "image.gif"
}
}
where "database" refers to the record attribute with name defined in categoryKey property of tree(default "type" ).
expandDepth
Number
Initially expand tree to this depth
Fires event expandDepthChange
Fires when the value for the configuration attribute expandDepth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
form
Object
Form object, used for form submission. Example
Default: undefined
Example:
form : { url: 'my-submit-url.php', method:'post', name : 'myForm' }
formConfig
Object
Form config for child elements, example { labelWidth : 200, stretchField:true }, which will be applied to all child form elemetns if no labelWidth is defined in their config
Default: undefined
frame
Boolean
Draw a frame around the component. This is done by assigning the container to css class ludo-container-frame and body element to ludo-body-frame. You can also customize layout by specifying css and|or containerCss
Default: false
inputConfig
Object
Configuration of input field. same as for configuration of form.Text
Default: {}
Fires event inputConfigChange
Fires when the value for the configuration attribute inputConfig is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
ludoDB
Object
Config object for LudoDB integration.
Example:
ludoDB:{ 'resource' : 'Person', 'arguments' : 1, // id of person 'url' : 'router.php' // optional url }
This example assumes that ludoJS properties are defined in the LudoDBModel called "Person".
object tplParserConfig
Default config for ludo.tpl.Parser. ludo.tpl.Parser is a JSON compiler which converts given tpl into a string. If you want to create your own parser, extend ludo.tpl.Parser and change value of tplParserConfig to the name of your class
Default: { type: 'tpl.Parser' }
primaryKey
Array
Keys to use as primary key for records. If you show different types of nodes, example continent, country, city you may have records with the same "id". primaryKey let you specify keys to use as a combined primary key example: ["id","type"]. If no keys are set, "id" will be used.
Default: []
Fires event primaryKeyChange
Fires when the value for the configuration attribute primaryKey is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
String template for nodes in the tree
Example:
tpl : '{title}
or as an object:
tpl:{
tplKey : 'type',
city : 'City : {city}',
country : 'Country : {country}
}
When using an object, "tplKey" is a reference to a common property of all objects, example "type". When type for a node is "city", it will use the city : 'City : {city}' tpl. When it's "country", it will use the "country" tpl.
[
{ id:1, "country":"Japan", "type":"country", "capital":"Tokyo", "population":"13,185,502",
children:[
{ id:11, city:'Kobe', "type":"city" },
{ id:12, city:'Kyoto', "type":"city" },
{ id:13, city:'Sapporo', "type":"city"},
{ id:14, city:'Sendai', "type":"city"},
{ id:15, city:'Kawasaki', "type":"city"}
]},
{id:2, "country":"South Korea", "capital":"Seoul", "population":"10,464,051", "type":"country",
children:[
{ id:21, city:'Seoul', "type":"city" }
]},
{id:3, "country":"Russia", "capital":"Moscow", "population":"10,126,424", "type":"country"},
]
is an example of a data structure for this tpl.
resizable
Boolean
if set to true and this component is a child of a component with "rows" or "cols" layout, resize handles will be created for it and it will be resizable. Please notice that components with stretch set to true are not resizable.
showLines
Boolean
Show lines between nodes
Default: true
Fires event showLinesChange
Fires when the value for the configuration attribute showLines is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
socket
Object
Configuration object for socket.Socket, Example: A reference to the socket can be retrieved by this.getSocket()
Default: undefined
Example:
socket:{ url:'http://127.0.0.1:1337', emitEvents:['chat','logout'] }
Events
beforeload
This event is fired from the "load" method before a remote request is sent to the server.
beforeshow
Event fired just before a component is shown using the show method
Event Payload:
-
thisObject
createNode
Event fired when a node is created
resize
Event fired when component is resized