Quick-Start Question

Webix JS
#1

Following the quick start here: https://webix.com/quick-start I noticed that the divider between the form and the list does not extend to the height of the page unless an empty object is added to the form. Why is this?

rows: [
  { view:"toolbar", id:"mybar", elements:[
      { view:"button", value:"Add", width:70, click:add_row },
      { view:"button", value:"Delete", width:70, click:delete_row },
      { view:"button", value:"Update", width:70, click:update_row },
      { view:"button", value:"Clear Form", width:85, click:"$$('myform').clear()"}
  ]},
  { cols:[
    {view:"form", id:"myform", width:200, elements:[
      { view:"text", name:"title", placeholder:"Title", width:180, align:"center"},
      { view:"text", name:"year", placeholder:"Year", width:180, align:"center"},
      {} // <---<< WHY IS THIS REQUIRED
    ]},
    {
      view:"list",
      id:"mylist",
      template:"#id#. #title# - #year#.",
      select:true, //enables selection
      data: filmset
    }
  ]}
]
#2

The point is that the text inputs have the default height (38px), so the form will take their size and, as the list has no height, the entire layout will take the same size.

In general:

  • If there are no sizes, the component/layout cell will be adjusted to the parent container/view (document body, if there’s no any)
  • If it has the predefined height/width, the parent view will be adjusted to this size.

An empty view (a spacer) can be used to fill the rest of the space, i.e. the difference between the component/container sizes.