Fork me on GitHub

Example: Basic tree field creation

How to create a tree field.

Basic TreeField creation

Use the following code to create a basic inputEx TreeField.

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-tree', function(Y) {

    new Y.inputEx.TreeField({
        parentEl: 'container1',
        elementType: {
            type: 'inplaceedit',
            visu: {
                visuType: "func",
                func: function (val) {
                    var url = "http://" + val + "/favicon.ico";
                    return '<img style="width:16px; height:16px; margin:0; padding:0;" src="' + url + '" />&nbsp;' + val;
                }
            },
            editorField: {
                type: 'string',
                placeholder: 'type a domain name'
            }
        },
        value: {
            value: "google.com",
            childValues: [
                {
                    value: "maps.google.com",
                    childValues: []
                },
                {
                    value: "picasaweb.google.com",
                    childValues: []
                },
                {
                    value: "plus.google.com",
                    childValues: [
                        {
                            value: "plusone.google.com",
                            childValues: []
                        }
                    ]
                },
                {
                    value: "support.google.com",
                    childValues: []
                }
            ]
        }
    });

});