qooxdoo 虚拟树作为菜单

Question

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

_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;
    },

Answer 1

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

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

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

干杯，
克里斯