Class zebkit.ui.tree.CompTree
extends <zebkit.ui.tree.BaseTree>

Component tree component that expects other UI components to be a tree model values. In general the implementation lays out passed via tree model UI components as tree component nodes. For instance:

    var tree = new zebkit.ui.tree.Tree({
         value: new zebkit.ui.Label("Label root item"),
         kids : [
               new zebkit.ui.Checkbox("Checkbox Item"),
               new zebkit.ui.Button("Button item"),
               new zebkit.ui.Combo(["Combo item 1", "Combo item 2"])

But to prevent unexpected navigation it is better to use number of predefined with component tree UI components:

  • zebkit.ui.tree.CompTree.Label
  • zebkit.ui.tree.CompTree.Checkbox
  • zebkit.ui.tree.CompTree.Combo

You can describe tree model keeping in mind special notation

    var tree = new zebkit.ui.tree.Tree({
         value: "Label root item",  // zebkit.ui.tree.CompTree.Label
         kids : [
               "[ ] Checkbox Item 1", // unchecked zebkit.ui.tree.CompTree.Checkbox
               "[x] Checkbox Item 2", // checked zebkit.ui.tree.CompTree.Checkbox
               ["Combo item 1", "Combo item 2"] // zebkit.ui.tree.CompTree.Combo
zebkit.ui.tree.CompTree ([model], [b])

  • [model] <Object |>

    a tree data model passed as JavaScript structure or as an instance

  • [b] <Boolean>

    the tree component items toggle state. true to have all items in opened state.

Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(target)    doLayout( )    fire(name, [path], [params])    focused( )    getBottom( )    getCanvas( )    getComponentAt(x, y)    getHorPadding( )    getIM(item)    getItemAt([root], x, y)    getItemBounds(root)    getItemMetrics(i)    getItemPreferredSize(root)    getLeft( )    getPreferredSize( )    getRight( )    getToggleBounds(root)    getToogleView(i)    getTop( )    getVerPadding( )    hasFocus( )    indexOf(c)    insert(i, constr, d)    invalidate( )    invalidateLayout( )    isOpen(i)    kidAdded(index, constr, l)    kidRemoved(i, l)    laidout( )    load(JSON)    makeVisible(item)    off([eventName], [path], [cb])    on([eventName], [path], cb)    paintChild(g, root, index)    paintComponent(g)    paintItem(g, root, node, x, y)    paintViewAt(g, ax, ay, v)    properties([path], props)    property([path], name, value)    recalc( )    relocated(px, py)    remove(c)    removeAll( )    removeAt(i)    removeByConstraints(ctr)    removeMe([after])    repaint([x], [y], [w], [h])    replaceMe([ctr], c)    requestFocus( )    requestFocusIn([timeout])    resized(pw, ph)    select(item)    setAt(i, d)    setBackground(v)    setBorder([v])    setBorderLayout([gap])    setBottomPadding(bottom)    setBounds(x, y, w, h)    setByConstraints(constr, c)    setConstraints(ctr)    setEnabled(b)    setFlowLayout([ax], [ay], [dir], [gap])    setGaps(gx, gy)    setId(id)    setKids(a)    setLayout(m)    setLeftPadding(left)    setLineColor(c)    setListLayout([ax], [gap])    setLocation(xx, yy)    setModel(d)    setPadding(v)    setParent(o)    setPreferredSize(w, h)    setProperties([path], props)    setRasterLayout([usePsSize])    setRightPadding(right)    setSelectable(b)    setSize(w, h)    setStackLayout([gap])    setTopPadding(top)    setViews(v)    setVisible(b)    toBack( )    toFront( )    toggle(item)    toggleAll(root, b)    togglePressed(root)    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    validate( )    validateMetric( )    vrp( )   

Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Object constraints    public Integer gapx    public Integer gapy    public Integer height    public Boolean isEnabled    public Boolean isValid    public Boolean isVisible    public Array kids    public zebkit.layout.Layout layout    public String lnColor    public zebkit.layout.Layoutable parent    public selected    public Integer width    public Integer x    public Integer y