Help with Extending Webix Components: up and down Methods Not Working as Expected

Webix JS
1

Hello Webix Community,

I’m currently working on a project where I want to add up and down methods to all Webix components. The goal is to be able to search for parent and child views within the component structure.

I’ve written the following code to extend the methods:

webix.extend(webix.ui.view.prototype, {
  up: function(viewName) {
    var parent = this.getParentView();
    while (parent) {
      if (parent.config.view === viewName || parent.config.id === viewName) {
        return parent;
      }
      parent = parent.getParentView();
    }
    return null;
  },
  down: function(viewName) {
    return this._findInChildren(this, viewName);
  },
  _findInChildren: function(parent, viewName) {
    if (!parent.getChildViews) return null;
    var children = parent.getChildViews();
    for (var i = 0; i < children.length; i++) {
      var child = children[i];
      if (child.config.view === viewName || child.config.id === viewName) {
        return child;
      }
      var found = this._findInChildren(child, viewName);
      if (found) return found;
    }
    return null;
  }
});

What I want to achieve:

  • up(viewName or id): This method should traverse the parent views and return the first parent view that matches the given name or ID.
  • down(viewName or id): This method should recursively search all child views and return the first view that matches the given name or ID.

The problem:

  • The code works as expected for simple components like button, but not for more complex components like form. The up and down methods do not seem to work correctly when applied to more complex containers.

For example, the following code only partially works:

    webix.ui({
      id: "mainLayout",
      rows: [
        {
          view: "toolbar", elements: [
            {view: "button", id: "myButton", value: "Click Me",
              click: function () {
                var me = this;
                var toolbar = me.up('toolbar'); // This is working

               var form = $$("myForm");
               var button = form.down('myFormButton'); // TypeError: form.down is not a function
              }}
          ]
        },
        {
          view: "form", id: "myForm", elements: [
            {view: "text", id: "myTextField", label: "Text Field"},
            {view: "button", id: "myFormButton", value: "Submit"}
          ]
        },
        {template: "Main Content", id: "mainContent"}
      ]
    });

Can someone help me understand why the down method doesn’t work for more complex components like form and how I can improve the code so that it works consistently for all Webix components?

Thank you in advance for your help!

Best regards!
Gerd

2

hello,
probably you need queryView method.
try to use someView.queryView("viewname", "parent") for parent view and someView.queryView("viewname") to get child view.