How to make CrossUI TreeView editable?

Question

Is there an item property to enable the edit mode like UIBuilder so that user can rename the item caption?

Answer 1

There's no this function in the native TreeView control. You have to implement it by your self.

Class('App', 'xui.Com',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0));};

            append(
                (new xui.UI.Pane())
                .setHost(host,"ctl_pane22")
                .setLeft(80)
                .setTop(30)
                .setWidth(130)
                .setHeight(140)
            );

            host.ctl_pane22.append(
                (new xui.UI.TreeView())
                .setHost(host,"ctl_treeview9")
                .setItems([{
                    "id" : "node1",
                    "sub" : ["node11",{
                        "id" : "node12",
                    },"node13","node14"],
                    "caption" : "node1"
                },{
                    "id" : "node2",
                    "sub" : ["node21","node22","node23","node24"],
                    "caption" : "node2"
                }])
                .onDblclick("_ctl_treeview9_ondblclick")
                );

            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        _ctl_treeview9_ondblclick:function (profile, item, e, src){
            var tv=profile.boxing(),
                source = profile.getSubNodeByItemId('ITEMCAPTION',item.id),
                pos = source.offset(),
                size = source.cssSize();

            var editor=new xui.UI.Input();
            editor.setWidth(size.width+20).setValue(item.caption);
            editor.beforeUIValueSet(function(prf, ov, nv){
                tv.updateItem(item.id, {caption:nv});
                editor.destroy();
                root.setBlurTrigger("my_editor",null);
                editor=null;
            });
            xui('body').append(editor);
            var root=editor.getRoot();
            root.popToTop(pos);
            root.setBlurTrigger("my_editor",function(){
                editor.setUIValue(editor.getUIValue(),true);
            });
            editor.activate();
            return false;
        }
    }
});