qooxdoo 虚拟树作为菜单答案

【问题标题】：qooxdoo virtual tree as menuqooxdoo 虚拟树作为菜单
【发布时间】：2012-02-14 22:45:21
【问题描述】：

我有一个函数，它使用小部件创建布局。问题是其中一个小部件是虚拟树（在布局的左侧），右侧的第二个小部件取决于左侧单击的行。虚拟树像菜单一样工作，它应该将行名的值返回给右侧的小部件，并使用提供的数据在右侧重新创建它。但是目前它不是重新创建，而是在旧的小部件上添加一个新的小部件。如何在右侧重新创建小部件而不将其添加到现有小部件（界面类似于带有测试的 qooxdoo 演示浏览器视图）？

_createLayout : function()
    {
        // Create main layout
        var dockLayout = new qx.ui.layout.Dock();
        var dockLayoutComposite = new qx.ui.container.Composite(dockLayout);
        this.getRoot().add(dockLayoutComposite, {edge:0});

        // Create header
        this.__header = new bank.view.Header(); 
        dockLayoutComposite.add(this.__header, {edge: "north"});

        // Create toolbar
        this.__toolBarView = new bank.view.ToolBar(this);
        dockLayoutComposite.add(this.__toolBarView, {edge: "north"});

        // Create the tree view, which should create dockLayout below, when user clicks with Row value
        dockLayoutComposite.add(this.getTreeView(), {edge: "west"});
        // This layout should be created and recreated with clicked row value
    dockLayoutComposite.add(bank.InvoiceListBuilder.createList("Tree_returned_value"), {edge: "center"});
    },

getTreeView : function()
    {
        var hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));
        var tree = new qx.ui.treevirtual.TreeVirtual("Tree");
        tree.setColumnWidth(0, 170);
        tree.setAlwaysShowOpenCloseSymbol(true);
        var dataModel = tree.getDataModel();
        var te2 = dataModel.addBranch(null, "Folders", true);
        dataModel.addBranch(te2, "Incoming", false);
        dataModel.addBranch(te2, "Outgoing", false);
        dataModel.addBranch(te2, "Drafts", false);
        dataModel.setData();
        hBox.add(tree);
        var foldercontent = bank.InvoiceListBuilder.createList("incoming");
        tree.addListener("changeSelection",
           function(e)
           {
            // this function should return row value to function: bank.InvoiceListBuilder.createList("Tree_returned_value") and create/recreate dockLayout with newly created widget from bank.InvoiceListBuilder.createList function
           });
        return hBox;
    },

【问题讨论】：

标签： menu tree virtual qooxdoo

【解决方案1】：

您正在使用旧的虚拟树实现 (qx.ui.treevirtual.TreeVirtual)，我建议使用 qx.ui.tree.VirtualTree 实现。

下一步是为视图使用控制器之类的东西，它会监听选择并在选择更改时创建小部件。控制器应该知道添加小部件的容器。

当您的左侧只是一个列表时。您也可以使用虚拟列表（qx.ui.list.List）并使用一组树模型。

干杯，克里斯

【讨论】：